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

栏目: 编程工具 · 发布时间: 6年前

内容简介:其实自己还是比较热衷于基于CLI的dashboard,也有心去做一些尝试,比如要前沿要生态,选Vue.js(无脑选择,只是想温习一下Vue),要快,GitHub上找template(懒,但不失为一种聪明的方式)。找到了Github上star最多的一家,熟悉使用vue脚手架生成项目的结构的话,对admin-template的结构就很清晰了。src下的目录结构:

其实自己还是比较热衷于基于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, 作为改页面的入口。此时可以看到侧边栏为如下效果:

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

注意,由于侧边栏默认的宽度为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-echarts GitHub - ecomfe/vue-echarts: ECharts component for Vue.js. , 另一家是vue生态大贡献家,饿了么,提供了v-echarts, GitHub - ElemeFE/v-charts: 基于 Vue2.0 和 ECharts 封装的图表组件:chart_with_upwards_trend::bar_chart: 。更有趣的是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]

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

下一步

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

一本书读懂大数据

一本书读懂大数据

黄颖 / 吉林出版集团有限责任公司 / 2014-12-1

进入大数据时代,让数据开口说话将成为司空见惯的事情,书中将从大数据时代的前因后果讲起,全面分析大数据时代的特征、企业实践的案例、大数据的发展方向、未来的机遇和挑战等内容,展现一个客观立体、自由开放的大数据时代。一起来看看 《一本书读懂大数据》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具