LQBZ_web

vue2-admin-template

基础处理

1. css 和 js 分离。建议每个组件以文件夹得形式存在 里面有.vue 文件和 css 在.vue 中引入同级目录的 css 即可

2. 自动注册组件，避免大段的 import

3. eslint 代码检查集成 强制要求代码检查 做到代码风格统一

4. scss 全局注入 不用每处都引入 避免代码臃肿

5. axios 二次封装 自定义求配置 防抖请求 等等。。

权限权限控制体系

当需要从后台获取权限的时候 需要去 router/private-routers.js 里面删除 privateRoutes 相关的引入

这里需要注意 userInfo 数据模型

userInfo = {
    permission:[
        'systemProgram',   // 对应每一个路由的 name
        'systemUser',
        'systemRole',
        'systemJurisdiction',
        'systemDispatch',
        'systemAudit',
        'systemLog',
        'systemConfig',
        ...

    ],
    roles:[...],
    user:[...]
}

• 管理为用户指定权限

• 通过权限列表查看当前项目的所有权限

当我们通过角色为用户指定到不同的权限之后 那么该用户就会在项目中体会到不同的权限功能

这一套关系就是我们所说的权限权限控制体系 也就是基于角色的权限 控制用户的访问

页面权限实现步骤如下：

• 登录从数据中拿到权限数据

• 私有路由表不被加到 routes 中

• 利用 addRoute API 动态添加到私有路由表

功能权限实现步骤如下：

• 登录从数据中拿到权限数据

• 定义隐藏按钮的方式（通过指令）

• 依据数据隐藏按钮

目录说明

根目录说明

├── public                      入口以及静态资源目录
│   ├── favicon.ico
│   └── index.html              入口 index.html
├── src                         源码
├──.browserslistrc
├──.env.development             开发环境配置文件
├──.env.production              生产环境配置文件
├──.eslintrc.js                 eslint 匹配规则
├──.gitignore                   git 配置忽略文件
├──.babel.config.js             babel 配置文件
├──.jsconfig.json               js 编译配置文件

├── package-lock.json
├── package.json
├── prettier.config.js          prettier插件格式话配置
├── README.md
├── tsconfig.json               TS 配置
├── vue.config.js               vue webpack 相关配置文件
└── yarn.lock

src 目录说明

├── api                         api 接口地址方法文件
│   ├── ....js                  具体看实例 自行天加
├── assets                      静态资源
├── components                  全局组件文件夹
├── http                        api 请求层封装
│   │   ├── axios.js            封装axios文件
│   │   └── index.js            封装axios get post 请求方法文件
├── layout                      页面排版
│   ├── components              页面排版所需的组件文件夹
│   │      ├── AppMain          页面视图
│   │      └── NavBar           导航组件
│   └── index.vue               页面排版入口文件
├── router                      路由配置 文件夹
│   ├──index.ts                 路由配置 入口文件 （已经配置好大部分的路由）
│   ├──private-routes.js        私有路由表
│   └──public-routes.js         公开路由表
├── store                       状态管理文件夹
│   ├── modules                 scss 样式目录入口文件全局加载 根据业务需求自行添加
│   │      ├── app.js           处理一部分业务逻辑state
│   │      └── app.js           处理登陆相关逻辑state
│   ├── getters.js              getters 计算属性
│   └── index.js                状态管理入口文件
├── style                       scss 样式目录
│   ├── index.scss              scss 样式目录入口文件全局加载
│   ├── color.scss              scss 全局变量
│   ├── mixin.scss              scss 全局函数 公用代码块
│   └── reset.scss              全局样式重置
├── utils                       工具目录 预留     根据业务需求自行添加
├── views                       视图目录
│    ├── err-page               404 401 视图文件目录
│    ├── home                   首页视图 文件目录
│    └── login                  登录视图 文件目录
├── App.vue                     App 入口文件
├── main.js                     负责引导整个应用的起点 (自动注册组件在这里完成)
└── pemission.js                路由拦截处理

图表使用

ECharts 官方文档

https://echarts.apache.org/zh/index.html

数字计算

BigNumber 讲解

// 转为 bignumber
const x = new BigNumber('123456789.123456789')
// 转为 普通数字
x.toNumber()

// 格式化(小数点)
x.toFormat() // '123,456,789.123456789'
x.toFormat(3) // '123,456,789.123'

// 文档地址 https://mikemcl.github.io/bignumber.js/#bignumber

拖拽插件

git 地址
// https://github.com/kutlugsahin/vue-smooth-dnd

图谱插件

文档地址
// http://relation-graph.com/#/docs/start

lodash

文档地址
// https://www.lodashjs.com/

运行命令

安装依赖

yarn install

运行项目 (默认运行于 8080 端口，可在 vue.config.js 文件中修改)

npm serve


编译项目

npm build

LICENSE

MIT