/vue-erek-manage

📈一款基于 Vue + iView + Mock.js 的后台管理，适用于小型项目后台管理，个人维护项目

Primary LanguageVue

简体中文 | English

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
  • ...

实现目标

  • 仪表盘
  • 列表页
  • 详情页
  • 错误页
  • 个人页
  • 主题设置

图表

  • 折现表
  • 数据卡片
  • 饼图
  • 雷达图
  • ...(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

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 与 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 文档，最终确定如此设计

其他链接

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