試用 vue-admin-template 寫一個本身的dashboard

初衷

其實本身仍是比較熱衷於基於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地圖相關的功能，完成業務需求。今天週六，休息。嗶嗶嗶嗶滴滴（你們都在罵滴滴）。