目录

• d2-admin基本使用
  • 1 安装
    • 1.1 全局安装 d2-admin
    • 1.2 创建项目
    • 1.3 启动项目
    • 1.4 注意事项
  • 2 修改框架 title 和 logo
    • 2.1 修改 title
    • 2.2 修改 logo
  • 3 图表库
    • 3.1 常用的图表库
    • 3.2 安装v-charts
    • 3.3 导入项目
    • 3.4 简单举例
    • 3.5 注意事项
  • 4 CURD插件（表格）
    • 4.1 安装
    • 4.2 导入项目
    • 4.3 图表使用
    • 4.4 注意事项
  • 5 定义数据API
    • 5.1 第一步，使用mockjs创建数据
    • 5.2 第二步，创建API接口，共VUE项目调用
    • 5.3 第三步，在 VUEX 中创建API，调用第二步中创建API接口，对数据进行操作
    • 5.4 第四步，在 view 中调用 VUEX 中的模块中的方法实现具体功能。
  • 6 权限控制
    • 6.1 第一步，在 mock 中添加用户信息，以及不同的用户对应的不同的权限，并保存至本地的sessionStorage中。
    • 6.2 第二步，在 src/API 中定义调用 mock 中 API 的接口，取到用户信息
    • 6.3 第三步，在 router/index.js 中添加钩子函数。
    • 6.4 第四步，在 store 中根据权限处理数据
    • 6.5 第五步，渲染页面后，即可看到当前用户具体有哪些操作权限

d2-admin基本使用

官方演示：https://d2admin.fairyever.com/#/index
官方文档：https://doc.d2admin.fairyever.com/zh/

1 安装

1.1 全局安装 d2-admin

npm install -g @d2-admin/d2-admin-cli

1.2 创建项目

d2 create 项目名称

或者

d2 c 项目名称

之后选择 简化版

1.3 启动项目

进入项目文件夹

npm i

npm run serve

1.4 注意事项

• d2-container是 D2Admin 构建页面最重要的组件,在模板页面中记得要用该标签包裹，该标签针对不样式的页面内置不同的类型，详见官方文档

2 修改框架 title 和 logo

2.1 修改 title

// .env.development

# 开发环境

# 页面 title 前缀
VUE_APP_TITLE=ZAdmin

修改完成后重启项目即生效

2.2 修改 logo

首页LOGL：
替换 .\public\image\theme\d2\logo\all.png

网页 ico 小图标：
替换 .\public\icon.ico

3 图表库

3.1 常用的图表库

• 百度图表库：echarts (此框架不方便)
• 饿了么图表库：v-charts （用这个）

v-charts 官方文档：https://v-charts.js.org/#/

3.2 安装v-charts

npm i v-charts echarts -S

3.3 导入项目

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

3.4 简单举例

以折线图为例，其他类型详见官方文档。

为了美观，将其包含在elementUI的Card组件中。

<template>
  <el-card>
    <ve-line :data="chartData"></ve-line>
  </el-card>
</template>

<script>
  export default {
    data: function () {
      return {
        chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
      }
    }
  }
</script>

3.5 注意事项

• 将多个图表分别放置在tab标签页时，切换标签页后下个图表可能会等待很久才会出现，是因为收到 elementUI 中Tabs标签页的 lazy 属性的影响（初始化时有个渲染的过程），如果没有开启延迟渲染，会只渲染第一个标签页内容，因此需要将 lazy 设置为 true

从第二 tbgs 标签页起，将lazy 属性设置为 true

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
        <ve-line :data="chartData"></ve-line>      
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="配置管理" name="second">
        <ve-histogram :data="chartDataHis"></ve-histogram>      
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane :lazy="true" label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>

4 CURD插件（表格）

D2 CURD是一个基于Vue.js 和 Element UI的表格组件，封装了常用的表格操作，使用该组件可以快速在页面上处理表格数据。
详见官方文档

4.1 安装

npm i element-ui @d2-projects/d2-crud -S

4.2 导入项目

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from '@d2-proj