基于 vue+element 的后台集成方案 vue-element-admin

本是古典何须时尚 2022-05-18 01:20 157阅读 0赞

vue-element-admin 详细介绍

## vue-element-admin ##

本项目的定位是后台集成方案，不适合当基础模板来开发，模板建议使用 [vueAdmin-template][] ， 桌面端 [electron-vue-admin][]

注意：该项目目前使用 [element-ui][]@1.4.1 版本，所以最低兼容 [vue][] 2.3.0。

### 前言 ###

这半年来一直在用vue写管理后台，目前后台已经有百来个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。由于是个人项目，所以数据请求都是用了mockjs模拟。注意：在此项目基础上改造开发时请移除mock文件。

该项目并不是一个脚手架，更倾向于是一个集成解决方案

该项目不支持低版本游览器，有需求请自行添加polyfill [详情][Link 1]

### 功能 ###

*  登录/注销
 *  权限验证
 *  侧边栏
 *  面包屑
 *  富文本编辑器
 *  Markdown编辑器
 *  JSON编辑器
 *  列表拖拽
 *  plitPane
 *  Dropzone
 *  Sticky
 *  CountTo
 *  echarts图表
 *  401，404错误页面
 *  错误日志
 *  导出excel
 *  table example
 *  动态table example
 *  拖拽table example
 *  内联编辑table example
 *  form example
 *  多环境发布
 *  dashboard
 *  二次登录
 *  动态侧边栏（支持多级路由）
 *  mock数据
 *  cache tabs example
 *  screenfull
 *  markdown2html
 *  views-tab

### 开发 ###

# 克隆项目
        git clone https://github.com/PanJiaChen/vue-element-admin.git
    
        # 安装依赖
        npm install
        //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
        npm install --registry=https://registry.npm.taobao.org
    
        # 本地开发 开启服务
        npm run dev

浏览器访问 [http://localhost:9527][http_localhost_9527]

### 发布 ###

# 发布测试环境 带webpack ananalyzer
        npm run build:sit-preview
    
        # 构建生成环境
        npm run build:prod

### 状态管理 ###

后台只有user和app配置相关状态使用vuex存在全局，其它数据都由每个业务页面自己管理。

### 效果图 ###

两步验证登录 支持微信和qq

![110658_maDD_2896879.gif][]

真正的动态换肤

![110708_Prf8_2896879.gif][]

[vueAdmin-template]: https://github.com/PanJiaChen/vueAdmin-template
[electron-vue-admin]: https://github.com/PanJiaChen/electron-vue-admin
[element-ui]: https://www.oschina.net/p/element-ui
[vue]: https://www.oschina.net/p/vue-js
[Link 1]: https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill
[http_localhost_9527]: http://localhost:9527/
[110658_maDD_2896879.gif]: https://static.oschina.net/uploads/space/2017/0823/110658_maDD_2896879.gif
[110708_Prf8_2896879.gif]: https://static.oschina.net/uploads/space/2017/0823/110708_Prf8_2896879.gif