写在前面

一年前，刚开始做数据可视化的时候，在自己理解的基础上结合单位的项目使用HTML+CSS+JS+D3 做了一个小项目。

在线展示地址：xuxiaoyang.site/isee/

Github地址：github.com/xuxiaoyang/…

最近学习了Vue后，为了练练手，小试牛刀，对这个小项目进行了重构，下面分享一下该项目的实现。

技术栈

• Vue 2.x
• Vue-Cli Vue的脚手架工具
• Vue-Router 前端路由
• Vuex 状态管理
• Echarts 数据可视化库
• Element 组件库
• Axios 数据请求

项目初始构建

首先安装Vue-cli 脚手架，并使用它创建一个项目

npm install -g vue-cli
vue create isee
复制代码

执行完这两个命令后，会出现一系列的cmd命令选择项，根据自己的需求选择即可，本项目需要Babel、VueRouter、Vuex、Css Pre-processors、EsLint，路由模式选择history mode，css预处理语言使用Less 项目结构目录如下：

• node_modules 各种依赖模块
• public 放置静态资源包括平台首页入口index.html、数据文件等
• src文件夹 这个目录下写代码，包括程序入口、vue组件、route、store等
• package.json 项目配置文件 其余文件就是Babel.Eslint等一系列配置文件，一般不需要修改。

这样，我们的项目架子就搭起来了，下面开始正式整项目。

安装模块依赖

完成这个项目，还需要Element做UI组件，Axios进行数据请求，Echarts做数据可视化图表。

yarn add  element-ui axios echarts
复制代码

页面实现

本项目是完全采用组件化的思想进行开发的响应式SPA单页面应用，即所有的交互都在一个页面完成，兼容PC端与移动端，使用的时候你会发现第一次加载页面相对比较慢，一旦加载完毕交互时就会很快。

src文件下开始写项目，包括路由组件的顶层路由App.vue，vue的入口文件main.js，路由配置文件route.js，vuex相关配置文件store.js，公共组件components，页面组件

App.Vue

路由组件的顶层路由，所有的路由组件都将挂载到这个页面。

main.js

vue的入口文件，注册路由配置文件router.js，vuex配置文件store.js，Element组件库以及挂载App.vue

route.js

前端路由配置文件。项目较小，所有的前端路由全部写在这个文件里。

store.js

vuex状态管理相关配置文件。

components文件夹

放置公共组件，包括Nav，Footer等，以Nav为例。

views文件夹

这个文件夹里写页面组件，项目中的6个功能模块以及指南模块分别成为一个页面组件，共7个页面组件，下面以Industry.vue为例。

结语

经过上述步骤，整个项目就构建好了，项目预览地址：

xuxiaoyang.site/isee-vue

关注 数据可视化技术 微信公众号