1 前期准备

1.1 通用环境搭建

安装包命令 npm install packagename

依赖或环境 版本 说明
Node 12.16.1 开发基础环境, 内置npm包管理工具(npm可配置镜像版cnpm)
TypeScript 3.0.1 TypeScript是JavaScript的类型化超集,易维护
VueCli 3.0 Vue 脚手架, 项目基础配置
Vuex 3.0.1 状态管理
VueRouter 3.0.3 Vue 路由
Stylus 0.54.5 CSS预处理器
Element-UI 2.1.1 Vue - UI库
eslint 6.8.0 代码检测,统一风格
echarts 4.6.0 图表可视化
axios 0.19.2 基于Promise的请求库
tinymce 5.1.6 富文本编辑器
vue-i18n 8.15.3 vue 国际化

1.2 基于element-ui 开发,搭建项目

1.3 文件目录配置


├── public # 静态资源 (会被直接复制)
│ │── favicon.ico # favicon图标
│ │── manifest.json # PWA 配置文件
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 (由 webpack 处理加载)
│ ├── components # 全局组件
│ ├── directive # 全局指令
│ ├── filters # 全局过滤函数
│ ├── icons # svg 图标
│ ├── lang # 国际化
│ ├── layout # 全局布局
│ ├── pwa # PWA service worker 相关的文件
│ ├── router # 路由
│ ├── store # 全局 vuex store
│ ├── styles # 全局样式
│ ├── utils # 全局方法
│ ├── views # 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ ├── permission.ts # 权限管理
│ ├── settings.ts # 设置文件
│ └── shims.d.ts # 模块注入
├── .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
├── .editorconfig # 编辑相关配置
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置
├── babel.config.js # babel-loader 配置
├── package.json # package.json 依赖
├── postcss.config.js # postcss 配置
├── tsconfig.json # typescript 配置
└── vue.config.js # vue-cli 配置

2 基于element-ui 基础UI组件封装 components文件夹下

2.1 参考其他管理后台结合实际情况封装通用UI组件

2.1.1 图片上传, 搜索头部栏, Excel上传,回到顶部,语言选择,分页, 全屏

2.2 业务组件的封装需要等具体业务需求

3 工具函数的封装(请求拦截) utils文件夹下

3.1 请求函数封装

3.1.1 拦截返回信息做统一处理和错误提示, 拦截请求参数配置token等参数。

3.2.其他工具函数

3.2.1 处理时间格式

3.2.2 持久化保存

3.2.3 错误log

3.2.4 验证等工具函数

4 权限管理, 路由拦截permission.ts

4.1 判断用户,动态添加路由权限

4.2 错误页面, 权限页面提示 404， 401

4.3 路由白名单

5 全局指令( 权限指令等)

5.1 在DOM元素上通过使用指令设置DOM的渲染

5.2 在Input 标签通过指令自动获取焦点

6 备注：

6.1 业务组件需要原型图根据业务封装

6.2 动态权限路由控制, 和权限指令需要后台提供权限路由json格式前端做匹配处理(目前动态路由只是前端做控制与实际业务不符)

6.3 如果要更改后台主题色需要ui提供颜色值和具体改动部分