初衷
其实自己还是比较热衷于基于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地图相关的功能，完成业务需求。今天周六，休息。哔哔哔哔滴滴（大家都在骂滴滴）。
