试用 vue-admin-template 写一个自己的dash

初衷

选型

克隆并编译项目

git clone 
## 修改成想要的名字
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，作为改页面的入口。此时可以看到侧边栏为如下效果：

image.png

注意，由于侧边栏默认的宽度为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图表库

导入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 
    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.png

下一步

使用echarts地图相关的功能，完成业务需求。今天周六，休息。哔哔哔滴滴（大家都在骂滴滴）。