vue-element-admin：把后台管理做成了开源范本

vue-element-admin 在 GitHub 上已经拿到 90.2K Star 了。

这是个基于 Vue 和 element-ui 的后台前端解决方案。它把企业后台常见的权限、布局、国际化、表格、富文本、上传下载这些活儿，封装到了一套可以直接跑的模板里。

1、 这玩意儿是干嘛的

干一件事：给开发者一个开箱即用的中后台 UI 起点。

登录退出、页面权限、指令权限、动态侧边栏、面包屑、标签页、皮肤切换、Mock 数据、错误页、各种拖拽组件、ECharts、Excel、Markdown 编辑器、JSON 编辑器、富文本编辑器,基本是企业管理后台会有的功能都内置了。

直接 clone 下来 npm run dev,浏览器自动打开 http://localhost:9527 就能跑。需要部署就跑 npm run build:prod,测试环境跑 npm run build:stage。

2、 为什么能长住 Star 榜

后台系统的前端开发有一类共性活:权限怎么配、菜单怎么动态生成、面包屑怎么跟路由同步、TagsView 怎么缓存组件。这些事每个项目都要做一遍,但单独写都不难,合起来就够磨人一周。

vue-element-admin 把这些事一次性写到了模板里,而且留了相对清晰的接入点。新人接手后台项目,先看这套代码再上手自己的工程,基本能省掉大半的探索时间。

它也给了一档 Base 模板 vue-admin-template,功能砍掉一半,留给只需要骨架的项目;TypeScript 版有社区维护的 vue-typescript-admin-template;桌面端有 electron-vue-admin。一鱼四吃。

3、 上手前的准备

本地要装好 node 和 git。项目基于 ES2015+、vue、vuex、vue-router、vue-cli、axios 和 element-ui,数据全部用 Mock.js 模拟,跟真实接口解耦。

依赖这些先有个概念再看代码,会比硬啃舒服不少。项目不支持 IE 和低版本浏览器,要兼容就自己加 polyfill。

版本上要注意:v4.1.0+ 的 master 分支默认不带 i18n,需要国际化走 i18n 分支;v4.0+ 是基于 vue-cli 的,老版本想脱离 vue-cli 就切到 tag/3.11.0。

4、 适合哪些人用

• 做中后台管理系统、需要从零起项目、想抄一个成熟模板的开发者
• 接手后台项目、想理解权限路由、动态菜单、TagsView 这套常见做法的人
• 给团队定前端基座、需要一份现成参考实现的工程师

它不是拿来就上生产的精品,而是拿来对照和裁剪的范本。看懂它怎么处理权限和路由,自己工程里的同类问题就不会再从零抠。

来对照和裁剪的范本。看懂它怎么处理权限和路由,自己工程里的同类问题就不会再从零抠。