初衷
其實自己還是比較熱衷於基於CLI的dashboard，也有心去做一些嘗試，比如 用 Nodejs CLI 的方式實現一個TODO應用 - 簡書 ，後續也會繼續增加新想法到這個裡面。但是我今天意識到一個問題，基於CLI的DashBoard的使用場景更適合類似Todo，以及一些快速資訊查詢和處理（比如我需要快速知道團隊的工作進度和工作內容，我並不想去找到瀏覽器並找到相應的標籤和過濾器），所以說基於CLI的DashBoard是偏鬆散的，可以認為是一套工具集而已。一些偏向精細化的內容還是需要圖形介面。所以我在GitHub - roubo/rouboworks: 基於Nodejs CLI的工作皮膚下面區分了CLI和WEB兩個目錄，後面可能還會有Desktop，這要看是否有大把的”悠閒時光“了。
選型
要前沿要生態，選Vue.js（無腦選擇，只是想溫習一下Vue），要快，GitHub上找template（懶，但不失為一種聰明的方式）。找到了Github上star最多的一家， GitHub - PanJiaChen/vue-element-admin: A magical vue admin， 但是大牛作者推薦大家不要直接在這個專案的基礎上進行二次開發，而是選用他的基礎版本：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template， 在該專案基礎上進行二次開發，同時可以參考vue-element-admin專案的效果，有需要用的元件就直接搬過來用。template專案中整合了： Element UI & axios & iconfont & permission control & lint。 vue-element-admin專案的預覽地址： vue-element-admin ，夠炫酷吧，但是遵從作者的告誡，只取直接真正需要的。
克隆並編譯專案
git clone https://github.com/PanJiaChen/vue-admin-template.git
## 修改成想要的名字
mv vue-admin-template dashboard
npm install
npm run dev
複製程式碼瀏覽模板專案程式碼
熟悉使用vue腳手架生成專案的結構的話，對admin-template的結構就很清晰了。src下的目錄結構：
.
├── App.vue //入口
├── api // 各種介面
├── assets // 圖片等資源
├── components // 各種公共元件，非公共元件在各自view下維護
├── icons //svg icon
├── main.js //入口
├── permission.js //認證入口
├── router // 路由表
├── store // 儲存
├── styles // 各種樣式
├── utils // 公共工具，非公共工具，在各自view下維護
└── views // 各種layout
複製程式碼目錄結構簡單明晰，作者文件中建議，將公共元件和非公共元件獨立出來，非公共元件在各種頁面下獨立維護，這一點在之間的專案中沒有做好，贊成作者的思路，雖然判斷真正的公共元件是一件難事。
Admin-template雖小，但是還是需要裁剪一些無用的demo。裁剪可以從router著手。
該期目標（非該篇文章）
該期目標只是要在DashBoard中加入一個Research內容，自己稱為”日常研究“，然後要把一個叫“金華市教育培訓（早教）機構的實時分析”的社會研究資料資訊以動態圖表的形式加到research標籤下。為後面自己業餘做的一些小研究（社會領域）找個載體。
裁剪
將router中無用的路由列表都去除，留下如下內容，配置方法參考vue-router官方文件。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '../views/layout/Layout'
export const constantRouterMap = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
component: () => import('@/views/dashboard/index')
}]
},
{
path: '/research',
component: Layout,
redirect: '/research/respage01',
name: 'Research',
alwaysShow: true,
meta: { title: '日常研究', icon: 'research' },
children: [
{
path: 'respage01',
name: 'Respage01',
component: () => import('@/views/respage01/index'),
meta: { title: '金華教育培訓市場準實時資料', icon: 'train' }
}
]
},
{
path: '*',
redirect: '/404',
hidden: true
}
]
export default new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
複製程式碼在view目錄下新增respage01目錄，內新增index.vue， 作為改頁面的入口。此時可以看到側邊欄為如下效果：
注意，由於側邊欄預設的寬度為180px，而我這個頁面的title又太長，所以我調整了styles目錄下的sidebar.scss下側邊欄寬度相關配置都為300px。順便提下，styles目錄下的樣式檔案都在根路由（HOME），也就是views/dashboard元件裡被載入：
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
複製程式碼刪除views下的其他無用檔案（根據裁剪的router來找對應的檔案會安全些），views下只剩下如下目錄結構：
├── 404.vue
├── dashboard
│ └── index.vue
├── layout
│ ├── Layout.vue
│ ├── components
│ └── mixin
├── login
│ └── index.vue
└── respage01
└── index.vue
複製程式碼接下來可專注於respage01，專注我們的業務，如果遇到其他外圍相關問題，我們再中間跳出分析。
加入Echarts圖表庫
Echartsjs圖表庫，是我個人心中的地表最強前端圖表庫，官方Demo可欣賞：ECharts Demo 。由於日常的研究，基本的流程就是，爬取資料，資料清洗，資料分析和資料結論展示，對於最後一步的結論展示，圖表肯定是最直觀的。
匯入echarts到專案
很有趣的是，目前有兩家公司在維護echarts for vue的工作，一家是作者方百度，提供了vue-echartsGitHub - ecomfe/vue-echarts: ECharts component for Vue.js., 另一家是vue生態大貢獻家，餓了麼，提供了v-echarts，GitHub - ElemeFE/v-charts: 基於 Vue2.0 和 ECharts 封裝的圖表元件??。更有趣的是star數都在2k多，不相上下。簡單比較了下，vue-echarts使用暴露原生配置的方式，理論上可以支援echarts的所有特性，而v-echarts是主打易用性，在封裝和區域性匯入縮減大小等方面做了很多工作，但是從文件上看，支援的圖表型別沒有echarts官方多，但也足夠用了。所以為了方便，還是選擇了後者，如果實在不能滿足需求了，自定義也無妨。
直接安裝：
npm i v-charts echarts -S
複製程式碼執行demo
在respage01/index.vue中加入v-charts demo程式碼：
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template>
<script>
import VeLine from 'v-charts/lib/line.common'
export default {
name: "index",
components: { VeLine },
data () {
return {
chartData: {
columns: ['date', 'PV'],
rows: [
{ 'date': '01-01', 'PV': 1231 },
{ 'date': '01-02', 'PV': 1223 },
{ 'date': '01-03', 'PV': 2123 },
{ 'date': '01-04', 'PV': 4123 },
{ 'date': '01-05', 'PV': 3123 },
{ 'date': '01-06', 'PV': 7123 }
]
}
}
}
}
</script>
<style scoped>
</style>
複製程式碼獲得如下結果：
[image:BE2B45BB-C538-472F-88A8-64EAA4CAB3CC-2866-0000681CA6760FFC/B5B738DC-A0A1-4AE2-8901-84B2566342A9.png]
下一步
使用echarts地圖相關的功能，完成業務需求。今天週六，休息。嗶嗶嗶嗶滴滴（大家都在罵滴滴）。