简体中文 | English
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
- ...
- 仪表盘
- 列表页
- 详情页
- 错误页
- 个人页
- 主题设置
- 折现表
- 数据卡片
- 饼图
- 雷达图
- ...(QAQ 后期还在做)
1 . Node.js is v10.6.0
2 . Vue-cli is v3.0.0
3 . 其他依赖请看 package.json 1. git clone https://github.com/PDKSophia/vue-erek-manage
2. cd vue-erek-manage
3. npm install
4. npm run serve使用文档正在写中，请放心，尽可能简单，让大哥们容易上手，有句话说的好: 重构是每天的事情，不要等代码量上来了，并且笨重了再进行重构，请大哥们不要离开我，我会加快进度，同时如果你觉得我 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 与 iview-admin 的文件夹架构，推翻之前的
src/js/app文件夹，新增src/conf文件夹当作配置文件, 整合所有配置文件如 menu 菜单栏、bread 面包屑等
- 观察 ant-design-pro 与 iview-admin 的文件夹架构，推翻之前的
-
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 的设计结构是在写react的redux-soga上，借鉴过来，并且通过 vuex 文档，最终确定如此设计
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