# Vue-Erek-Manage
## 介绍
`Vue-Erek-Manage` 是一款基于 `Vue 2.5` + `iView UI` 的后台管理, 借鉴模仿 `pro-ant-design`的设计，👉 适用于小型项目后台管理，个人维护项目
## 特性
- 直接配置 `Menu菜单栏` 和 `BreadItem面包屑`
- 使用 `npm + webpack + babel` 的工作流，支持 `ES6`
- 仿`pro-ant-design`框架, 提供`Echarts图标` `Table表格列表`等页面借鉴
## 技术栈
- vue-cli
- vuex
- axios
- vue-router
- scss
- iView
- echarts
- mock.js
- ...
## 实现目标
- [x] 仪表盘
- [x] 列表页
- [x] 详情页
- [x] 错误页
- [x] 个人页
- [x] 主题设置
## 图表
- [x] 折现表
- [x] 数据卡片
- [x] 饼图
- [x] 雷达图
- [ ] ...(QAQ 后期还在做)
## 项目环境
```javascript
1 . Node.js is v10.6.0
2 . Vue-cli is v3.0.0
3 . 其他依赖请看 package.json
```
## 使用
```javascript
1. git clone https://github.com/PDKSophia/vue-erek-manage
2. cd vue-erek-manage
3. npm install
4. npm run serve
```
## Wiki 使用文档
> 使用文档正在写中，请放心，尽可能简单，让大哥们容易上手，有句话说的好: **重构是每天的事情，不要等代码量上来了，并且笨重了再进行重构**，请大哥们不要离开我，我会加快进度，同时如果你觉得我 OK 的话，给我点个星星 ✨ 吧，算是对我的一个鼓励，爱你们 ❤️
## 文件架构
```
·
├── package.json
│
├── public 打包的数据
│
├── src
│ ├── assets 图片等资源文件
│ │
│ ├── components
│ │ ├─CommonComponents
│ │ │ ├─Badge 封装的Badge组件，实例: 个人中心
│ │ │ ├─Divider 封装的Divider组件
│ │ │ ├─FolatButton 封装的圆圈按钮组件
│ │ │ ├─NoContent 封装的无数据显示组件
│ │ │ ├─StandCard 封装的带有放大的卡片组件
│ │ │ ├─StarCard 封装的带有星星的卡片组件
│ │ │ └─ ...
│ │ ├─EchartsCardComponents 封装的卡片数据组件
│ │ ├─EchartsComponents
│ │ │ ├─Line 封装的折线图组件
│ │ │ ├─Pie 封装的饼图组件
│ │ │ ├─Radar 封装的雷达图组件
│ │ │ └─ ...
│ │ ├─FormComponents
│ │ │ ├─LoginForm 封装的登陆表单组件
│ │ │ └─ ...
│ │ ├─FrameComponents
│ │ │ ├─Canvas 封装的登陆canvas动画组件
│ │ │ ├─Index 封装的项目首页文字显示组件
│ │ │ ├─Layout 封装的Layout组件
│ │ │ ├─List 封装的列表组件
│ │ │ └─ ...
│ │ ├─HigherOrderComponents
│ │ │ ├─HOC-EchartCard 封装的数据卡片中间层组件
│ │ │ ├─HOC-EchartLine 封装的折线图中间层组件
│ │ │ ├─HOC-EchartPie 封装的饼图中间层组件
│ │ │ ├─HOC-EchartRadar 封装的雷达图中间层组件
│ │ │ └─ ...
│ │ ├─ProfileTableComponents
│ │ │ ├─BaseTable 封装基本详情页中的Table组件
│ │ │ ├─AdvanceTable 封装高级详情页中的Table组件
│ │ │ └─ ...
│ │ └─ ...
│ │
│ ├── js
│ │ ├─app
│ │ │ ├─bread-config.js 面包屑配置
│ │ │ ├─global-config.js 部分配置
│ │ │ ├─index-config.js 应用配置
│ │ │ ├─menu-config.js 菜单栏配置
│ │ │ └─ ...
│ │ ├─echarts 图表的配置
│ │ │ ├─line.config.js
│ │ │ ├─pie.config.js
│ │ │ ├─radar.config.js
│ │ │ └─ ...
│ │ ├─ mock mock模拟请求
│ │ │ ├─app.js
│ │ │ ├─card.js
│ │ │ ├─data.js
│ │ │ ├─echarts.js
│ │ │ ├─list.js
│ │ │ ├─user.js
│ │ │ └─ ...
│ │ ├─utils
│ │ │ ├─utils.js 其他函数处理文件
│ │ │ ├─vue-token.js
│ │ │ └─ ...
│ │ └─ ...
│ │
│ ├── router 路由
│ │
│ ├── service 与服务器相关文件
│ │ ├─api-app.js
│ │ ├─api-echarts.js
│ │ ├─api-list.js
│ │ ├─api-user.js
│ │ ├─index.js
│ │ ├─request.js
│ │ └─ ...
│ │
│ ├── store vuex模块化
│ │ ├─modules
│ │ │ ├─global.js
│ │ │ ├─standard.js
│ │ │ ├─table.js
│ │ │ ├─user.js
│ │ │ └─ ...
│ │ ├─index.js
│ │ ├─types.js
│ │ └─ ...
│ │
│ │
│ ├── view
│ │ ├─Index 首页
│ │ ├─Login 登陆页
│ │ ├─Manage
│ │ │ ├─VueErekException 错误页
│ │ │ ├─VueErekIndex 仪表盘
│ │ │ ├─VueErekList 列表页
│ │ │ ├─VueErekProfile 详情页
│ │ │ ├─VueErekTool 工具页
│ │ │ ├─VueErekUser 个人页
│ │ │ └─ ...
│ │ ├─Router.vue
│ │ └─ ...
│ │
│ ├── main.js
│ │
│ ├── App.vue
│ └─
│
├── vue.config.js webpacck配置
│
└─
```
## 页面展示
---
---
---
---
---
---
---
---
---
---
---
---
---
## 重...重构？
😣 最近去把一些个人或者小公司自己做的开源后台框架看了一下，发现自己不仅是代码太垃圾了，包括文件夹的归纳是在太乱了，然后呢就看了别人的文件夹架构，emmmm，就优化一下吧，包括后面用 `eslint + prettier` 格式化了一下代码，看着顺眼多了 👀
## 重构日志
- 2019.05.25
- 观察 [ant-design-pro](https://github.com/ant-design/ant-design-pro) 与 [iview-admin](https://github.com/iview/iview-admin) 的文件夹架构，推翻之前的 `src/js/app` 文件夹，新增 `src/conf` 文件夹当作配置文件, 整合所有配置文件如 menu 菜单栏、bread 面包屑等
- 2019.05.26
- 推翻`src/js/utils`文件夹，新增`src/utils`文件夹当作全局处理函数与缓存文件。
- 推翻`src/js/mock`文件夹，将所有的 mock 全都整合到一个文件中。
- 将所有`service`中的 api 都整合成一个文件。
- 重构`request`文件，重新封装所有请求
- 修改`Login`登陆页面逻辑，重写 vuex 中 user 模块，通过 dispatch 发起 action 进行登陆，而不是直接调用接口
- 重构验证码获取、登陆、通过 token 获取用户信息逻辑，替换接口和页面的 dispatch
- 替换所有的 api 接口，重构所有的 vuex 状态机，所有关于 api 操作均由 dispatch 进行分发
- 2019.05.27
- 重构用户页的 mock 及 vuex 模块
- 重构列表页面的表格模块，通过阅读 vuex 文档，对 vuex 的 namespaced 有一定的了解，模块化 vuex
## 吐槽一哈
在做图表、数据卡片的时候，在思考，如何让用户使用起来更加方便简介，想在 `Echarts组件` 和用户使用的 `xx组件` 之间做一层封装，用户只需要传递数据即可，至于其他的默认配置就在中间一层配置就好，这时候，就想到 `React` 大法的好处了，想到 `高阶组件` 的好处了，并不是说 Vue 不能用高阶组件，而是我不会在 Vue 中写简单的高阶组件，心累
## vuex 设计
vuex 的设计结构是在写`react`的`redux-soga`上，借鉴过来，并且通过 vuex 文档，最终确定如此设计
- [vuex 命名空间](https://vuex.vuejs.org/zh/guide/modules.html#%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4)
- [vuex 的 action](https://vuex.vuejs.org/zh/guide/actions.html#action)
- [redux-soga](https://neighborhood999.github.io/redux-saga/)
---
## 其他链接
blog: https://github.com/PDKSophia/blog.io
juejin: https://juejin.im/user/594ca8a35188250d892f4139
pro-ant-design: https://pro.ant.design/index-cn
---
Copyright © 2018 by PDK
If you have any questions, please contact me 1063137960@qq.com