Writing in the front

A year ago, when I started to do data visualization, I made a small project using HTML+CSS+JS+D3 based on my own understanding and combining the unit project.

Online display address: xuxiaoyang.site/isee/

Github address: github.com/xuxiaoyang/…

After learning Vue recently, I reconstructed this small project in order to practice my skills and test my skills. The realization of this project is shared below.

Technology stack

  • Vue 2.x
  • Vue-Cli Vue scaffolding tool
  • Vue-router Indicates the front-end route
  • Vuex status management
  • Echarts Data visualization library
  • Element component library
  • Axios data request

Initial project construction

Start by installing vue-CLI scaffolding and using it to create a project

npm install -g vue-cli
vue create isee
Copy the code

After executing these two commands, a series of CMD options will appear, which can be selected according to your own needs. This project requires Babel, VueRouter, Vuex, Css pre-processors, EsLint, and history mode for routing. CSS preprocessor language uses Less project structure directory as follows:

  • Node_modules Various dependent modules
  • Public Places static resources, such as platform homepage entry index.html and data files
  • SRC folder this directory to write code, including program entry, vue components, route, store, etc
  • Json project configuration files The rest are a series of configuration files, such as babel.esLint, that generally do not need to be modified.

In this way, we put up the project shelf, the beginning of the formal whole project.

Installing module dependencies

To complete the project, we also needed Element for the UI component, Axios for the data request, and Echarts for the data visualization diagram.

yarn add  element-ui axios echarts
Copy the code

Page implementation

This project is a responsive SPA single-page application developed with the idea of componentization, that is, all interactions are completed on one page, compatible with PC and mobile terminals. When using it, you will find that the first page is relatively slow to load, and the interaction will be very fast once the loading is completed.

Start writing projects under SRC file, including the top-level route of routing component app. vue, the entry file of vue main.js, routing configuration file route.js, vuex related configuration file store.js, common component Components, page component

App.Vue

The top-level routing of the routing component, to which all the routing components will be mounted.

main.js

Vue entry file, register routing profile router.js, vuex profile store.js, Element component library and mount app. vue

route.js

Front-end routing configuration file. The project is small and all front-end routes are written in this file.

store.js

Vuex status management configuration files.

The components folder

Place common components, including Nav, Footer, etc. Take Nav for example.

Views folder

Page components are written in this folder. Six functional modules and guide modules in the project become one page component respectively. There are altogether seven page components.

conclusion

After the above steps, the whole project is built, project preview address:

xuxiaoyang.site/isee-vue

Focus on data visualization technology wechat official account