# 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 讲解

```js
// 转为 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
```

## 拖拽插件

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

```

## 图谱插件

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

## lodash

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

## 运行命令

```

安装依赖

yarn install

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

npm serve


编译项目

npm build

```

## LICENSE

MIT