寫在前面
一年前，剛開始做資料視覺化的時候，在自己理解的基礎上結合單位的專案使用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為例。
結語
經過上述步驟，整個專案就構建好了，專案預覽地址：
關注 資料視覺化技術 微信公眾號
