Vue Element Admin：8.9 万星的后台管理模板

大多数前端团队在接到「做一个后台管理系统」的需求时，第一反应是打开编辑器从零开始搭架子。路由、权限、布局、请求封装、国际化……这些每个后台都要有的东西，每次都要重新写一遍。

vue-element-admin 就是来解决这个问题的。它是一个基于 Vue 2 和 Element UI 的后台管理前端模板，GitHub 上有 89,400 个 star，是目前整个 GitHub 上 star 数最高的后台管理模板。

它做了什么

简单说：一个完整的、可以直接跑的后台管理系统。动态路由、权限控制、国际化、多图表库、Excel 导入导出、PDF 生成、主题切换、Markdown 编辑器、JSON 编辑器……一个模板该有的，它都做了。

还内置了三个典型业务场景的示例：Table 列表、Tab 选项卡和 Form 表单。不是那种只放几个 div 的 demo 页面，是带完整交互逻辑的真实页面，可以直接参考着写自己的业务。

技术栈

Vue 2 + Element UI + Vuex + Vue Router，组件支持 JavaScript 和 TypeScript 双版本。主题色可以全局配置，响应式布局适配不同屏幕。代码风格统一，目录按功能划分，接手成本低。

快速上手

三步就能跑起来：

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install
npm run dev

本地访问 http://localhost:9527 就能看到完整的示例后台。建议先在本地跑一遍，点点各个页面，看看哪些功能是你项目需要的，然后基于 master 分支或者 Minimal 模板开始改。

有 7 个分支可以用：master（完整版）、i18n（多语言）、easy-mock（联调 Easy Mock）、without-jsx（无 JSX 版）、minimal（最小精简版）、tab（Tab 页签模式）、ssr（服务端渲染版）。根据项目需要选一个。

谁在用

从 GitHub 的 Used By 列表看，不少团队已经在生产环境用了这个模板。它的文档写得详细，遇到问题基本能在 Issues 里找到答案。

做后台管理系统这件事，技术上没有什么难点，但琐碎的事情多。vue-element-admin 把这些琐碎的事情做好了，让你可以把精力放在业务逻辑上。

ue-element-admin 把这些琐碎的事情做好了，让你可以把精力放在业务逻辑上。