vue2+element 管理后台 集成解决方案
来源:互联网 发布:php拼接字符串 编辑:程序博客网 时间:2024/06/05 12:49
线上地址 http://panjiachen.github.io/vue-element-admin/#/login
前言
这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs代替。
后续会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~
功能
- 登录/注销
- 权限验证
- 侧边栏
- 面包屑
- 富文本编辑器
- Markdown编辑器
- JSON编辑器
- 列表拖拽
- plitPane
- Dropzone
- Sticky
- CountTo
- echarts图表
- 401,401错误页面
- 错误日志
- 导出excel
- table example
- form example
- 多环境发布
- dashboard
- 二次登录
- 动态侧边栏
- mock数据
开发
# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 安装依赖 npm install # 本地开发 开启服务 npm run build
浏览器访问 http://localhost:9527
发布
# 发布测试环境 带webpack ananalyzer npm run build:sit-preview # 构建生成环境 npm run build:prod
目录结构
├── build // 构建相关 ├── config // 配置相关├── src // 源代码│ ├── api // 所以请求│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── directive // 全局指令│ ├── filtres // 全局filter│ ├── mock // mock数据│ ├── router // 路由│ ├── store // 全局store管理│ ├── styles // 全局样式│ ├── utils // 全局公用方法│ ├── view // view│ ├── App.vue // 入口页面│ └── main.js // 入口 加载组件 初始化等├── static // 第三方不打包资源│ ├── jquery│ └── Tinymce // 富文本├── .babelrc // babel-loader 配置├── eslintrc.js // eslint 配置项├── .gitignore // git 忽略项├── favicon.ico // favicon图标├── index.html // html模板└── package.json // package.json
状态管理
后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。
效果图
两步验证登录 支持微信和qq
真正的动态换肤
可收起侧边栏
拖拽排序
上传裁剪头像
错误统计
富文本(整合七牛 打水印等个性化功能)
封装table组件
图表
导出excel
更多demo
阅读全文
0 0
- vue2+element 管理后台 集成解决方案
- vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的
- vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的!
- Vue2 后台管理系统解决方案
- Vue2 后台管理系统解决方案
- Vue2 后台管理系统解决方案
- Vue2 后台管理系统解决方案
- Vue2 + iVIew 后台管理系统解决方案
- Vue2集成AdminLte 后台模板
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
- vue2.0+elementUI 后台管理系统日记
- 基于 vue2 构建和后台真实交互的 管理系统
- Vue2 & ElementUI实现管理后台之input获得焦点
- IMF后台管理集成系统功能升级
- 为Vue2集成UIkit
- VUE2.0 element upload使用
- vuejs 和 element 搭建的一个后台管理界面
- dedecms后台模块管理空白解决方案。
- PLSQL:oracle 集合类型
- Python:二叉搜索树的第k个节点
- 通过HTML5 FileReader实现上传图片预览功能
- c++pair基本用法
- Ubuntu下安装mysql-connector-python
- vue2+element 管理后台 集成解决方案
- 如何用微服务重构应用程序
- Oracle 9i RMAN恢复过程中,归档日志找不到.
- mac Apache+php环境开发
- 【近期安排】
- kamailio gdb调试
- java商品类的无限递归展示
- 【Linux】CentOS(6.8)更新yum源 -->(阿里源<ali>)
- linux crontab定时执行命令