zengxianlin / vue-backend

Vue + ElementUI 后台管理系统框架

本框架为后台管理类系统解决方案，其中包含很多后台管理中的必备功能。当前版本仅供学习交流，框架中vue及webpack版本会随时更新，尽量采用平滑升级策略，修改部分全局或打包配置完成，如果更改过大，版本号将自动增加，并提供之前版本的release，所以如果注重稳定的话，请在生产环境中谨慎使用。

功能列表

• 登录登出
• 菜单异步加载
• 页面详细权限控制
• 多语言支持
• 布局切换
• 高德地图集成
• Echarts集成
• 错误页面
• mock数据
• 页面加载进度条
• 级联选择示例

项目使用

# 安装项目依赖
npm install

# 开启本地服务，默认为localhost:9000
npm run dev

# 项目打包，构建生产环境
npm run build

# 打包过程中想查看具体报告则可以通过以下命令实现
npm run build --report

项目结构

本项目的开发代码目录结构如下，在编码时请按照规则放置代码

./root
├── ...
│   ├── mock/                               // 模拟请求
├── src                                     
│   ├── components                          
│   │   ├── platformCom                     // 平台通用组件
│   │   │   ├── ...
│   │   │   ├── install.js                  // 平台组件全局注册
│   │   ├── customCom                       // 项目组件
│   │   │   ├── global/                     // 项目全局组件
│   │   │   │   ├── ...     
│   │   │   │   ├── install.js              // 项目全局组件安装
│   │   │   ├── locale/                     // 项目局部组件
│   ├── lang                                // 国际化文件
│   │   ├── en.js                           
│   │   ├── zh-cn.js
│   │   ├── ...
│   ├── page                                // 项目页面
│   │   ├── ...                             // 页面名称
│   │   │   ├── *.vue                       // vue文件
│   │   │   ├── ...                         
│   ├── resources                           // 静态资源
│   │   ├── ...                             
│   ├── util                                // 通用工具
│   │   ├── http.js                         // ajax全局设置
│   │   ├── i18n.js                         // 国际化全局设置
│   │   ├── amap.js                         // 高德地图注册
│   │   ├── ...
│   ├── store                               // vuex状态管理
│   │   ├── modules/                        // vuex的modules
│   │   ├── state.js                        
│   │   ├── getter.js                       
│   │   ├── mutations.js                    
│   │   ├── actions.js                      
│   │   ├── store.js                        
│   ├── router
│   │   ├── asyncRouter.js                  // 异步路由表
│   │   ├── directAccess.js                 // 直接访问路由表(预留)
│   │   ├── index.js                        // vue-router路由配置
│   ├── index.html                          // 单文件入口渲染模板
│   ├── index.vue                           // 首页vue
│   ├── main.js                             // webpack入口文件
├── ...

更新计划

• 修复 多语言在单文件组件中无法切换的BUG

• 高德地图及echarts组件化

  当前加载方式属于一次性注册，可以进一步组件化。

• 文件目录优化

  当前组件目录可能过于冗余，以后可能会进行合并。或者增加分支，把真正的源放到另外的分支中，本分支只面向大众一般情况。

• 更好的组件加载方式

  当前异步组件加载方式看着很别扭，同时会有过多的script和style标签，需要后续优化。

• 完善打包策略

  当前打包策略并不完善。理想中的策略应该是所有第三方组件打包在一起，业务与首页分离，即最后应该是vendor(lib)、home/index、page（相同业务或相同菜单在一起）。

• 界面UI重新定制，形成完整的主题。

• 完全的优雅的主题切换方式

  当前其实并没有完成主题切换方式，只是更改了布局。当前CSS写法方面在面对主题切换时遇到很大的问题，初步想法是不在 .vue 文件中编写css，把所有的css提到单独文件中，以便管理。主题切换则采用加载固定CSS文件的方式。这里会继续写一个博客。

• ElementUI v3.0更新，更新前会发布release版本

• 消息推送