167

vue2+element 管理后台 集成解决方案

花裤衩 2017-04-25 发布于前端 segmentfault.com

vue+element+axios 管理后台最佳实践

vue2+element 管理后台 集成解决方案

2017-04-25 发布,来源:segmentfault.com

线上地址

前言

这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs代替。会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~

功能

  • 登录/注销

  • 权限验证

  • 侧边栏

  • 面包屑

  • 富文本编辑器

  • Markdown编辑器

  • JSON编辑器

  • 列表拖拽

  • plitPane

  • Dropzone

  • Sticky

  • CountTo

  • echarts图表

  • 401,401错误页面

  • 错误日志

  • 导出excel

  • table example

  • form example

  • 多环境发布

  • dashboard

  • 二次登录

  • 动态侧边栏

  • mock数据

  • svg iconfont

开发

 # 克隆项目
 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

)

真正的动态换肤

拖拽排序

上传裁剪头像

错误统计

富文本(整合七牛 打水印等个性化功能)

更多demo

30k 浏览 746 收藏 报告 阅读模式
13 条评论
shindo · 2017-04-26

很优秀

+1 回复

freedog · 2017-04-26

棒棒哒

+1 回复

书生 · 2017-04-26

支持java 做后台服务器么

+1 回复

0

这是纯前端项目,后端服务用什么都无所谓

花裤衩 分享者 · 2017-04-26
兰兰 · 4月17日

优秀!如果有动态属性规格添加和table增一列删一列等等和权限,角色,菜单就更完美了,

回复

idomyway · 2018-07-10

太帅了

回复

cantinzing · 2017-05-06

坐等楼主教程

回复

mengdu · 2017-04-27

很不错哦,刚好学vue开发前端两个月,我也打算自己封装些类似的组件

回复

大麦田 · 2017-04-26

项目很赞

回复

ihipop · 2017-04-25

手机打开的效果不太好。。

回复

0

pc后台,不适配移动版

花裤衩 分享者 · 2017-04-26
Ficks · 2017-04-25

牛逼

回复

薛___先森 · 2017-04-25

好东西,期待。

回复

载入中...