简介:
最近公司项目采用vue搭建了一个后台管理系统,一路上遇到了许多问题,都是通过google来自己研究解决。在这个过程中学到了许多,于是决定把最基础的部分拿出来,单独做一个项目,以后再遇到类似的后台系统,直接可以拿过来用,免去了一开始的搭建环境、写基础代码的麻烦。同时也想分享出来,与大家交流交流,各位给提提意见,毕竟整个项目从头到尾都是自己一个人搞得,有点闭门造车的感觉,哈哈。
由于最近有点忙,还有一些东西没有加上去,后续会抽时间补上,谢谢关注
如果觉得还可以的话,麻烦给点个⭐⭐,谢谢各位喽?
github: https://github.com/luichooy/vue-admin.git
技术栈:
vue@2.5.2+vue-router@3.0.1+vuex@3.0.0+axios@0.17.0+element-ui@2.0.0+vue-echarts@2.5.1
Build Setup:
# 将项目克隆到本地git clone https://github.com/luichooy/vue-admin.git# 进入到项目目录cd vue-admin# 安装依赖npm install# 在开发环境运行项目,并且在浏览器打开 http://localhost:7999npm run dev# 项目打包npm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run all testsnpm test
目录结构:
├── build├── config├── src│ ├── assets│ │ ├── images│ │ ├── js| | | ├── addressData.js│ │ │ ├── localStorage.js│ │ │ ├── util.js│ │ └── styles│ │ │ ├── base.scss│ │ │ ├── common.scss│ │ │ ├── iconfont.css│ │ │ ├── mixin.scss│ │ │ ├── table.scss│ │ │ ├── variable.scss│ ├── components│ │ ├── card│ │ ├── filterbar│ │ └── score│ │ ├── selfAdd│ │ ├── tableRadio│ │ ├── validateCode│ │ ├── Vmodel│ ├── data│ ├── pages│ │ ├── charts│ │ ├── error│ │ ├── form│ │ └── login│ │ ├── main│ │ ├── setting│ │ ├── tables│ │ ├── test│ ├── router│ │ ├── index.js│ │ ├── route.js│ ├── store│ │ ├── getters.js│ │ ├── index.js│ │ ├── mutations.js│ │ ├── state.js│ ├── utils│ ├── utils.js│ ├── http.js│ ├── main.js│ ├── Root.vue├── static├── test├── babelrc├── eslintignore├── eslintrc.js├── .gitignore├── postcssrc.js├── index.html├── package.json └── readme.md
功能实现:
- [x] 登陆,登出
- [x] 验证码插件的实现
- [x] 通过vuex管理用户信息和token
- [x] 左侧菜单栏,上方顶部栏
- [x] 利用express完成api开发,实现数据mock
- [x] 利用axios设置请求,响应拦截器,对http请求进行统一管理
- [x] 设置vue-router的导航守卫,实现页面访问权限控制及页面跳转loading的同意管理
- [x] 引入vue-echarts,实现多种柱状图/折线图/饼图
- [x] 表格-基本表格示例,该部分会继续扩充
- [x] 自由表单渲染及自定义表单元素的实现
- [x] 测试部分有自己实现的各种组件,该部分会继续补充
- [ ] 利用express+mongodb 实现后台
效果预览:

login.gif

basic.gif

charts.gif

form.gif

test.gif
文章转载于:https://www.jianshu.com/p/70570e87df67
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~