vue.js 管理系统模板
vue-element-admin (vue-element-admin)
In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly Vue.js+Element+axios. Since it's a personal project, all data requests are simulated with Mock.js. Note: if anyone wants to modify or develop based on this project, please remove the mock files.
在过去的半年中,我一直在使用Vue构建管理仪表板的后端。 尽管后端包含70多个页面和10多个权限,但维护该项目仍需花费微不足道的精力。 因此,我决定将其开源,以便分享我在后端的开发经验和进展。 技术堆栈主要是Vue.js + Element + axios。 由于这是一个个人项目,因此所有数据请求均使用Mock.js进行模拟。 注意:如果有人要基于此项目进行修改或开发,请删除模拟文件。
现场演示 (Live Demo)
http://panjiachen.github.io/vue-element-admin
http://panjiachen.github.io/vue-element-admin
特征 (Features)
Login/Logout
登入/登出
Permission authentication
权限认证
Sidebar
侧边栏
Breadcrumb
面包屑
Rich text editor
富文本编辑器
Markdown editor
Markdown编辑器
JSON editor
JSON编辑器
Drag & drop list
拖放列表
SplitPane
拆分窗格
Dropzone
拖放区
Sticky
黏
CountTo
计数到
ECharts
图表
401, 404 error page
401、404错误页面
Error log
错误记录
Exporting to Excel
导出到Excel
Table example
表例
Interactive table example
互动表格示例
Drag & drop table example
拖放表示例
Form example
表格范例
Multi-environments distribution
多环境分配
Dashboard
仪表板
Two-factor authentication
两因素验证
Collapsing sidebar (support nested routes)
折叠边栏(支持嵌套路线)
Mock data
模拟数据
cache tabs example
缓存标签示例
screenfull
全屏
markdown2html
markdown2html
views-tab
视图选项卡
发展历程 (Development)
# Clone project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# Install dependencies
npm install
# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
npm install --registry=https://registry.npm.taobao.org
# Run local dev server
npm run dev
Visit in browser: http://localhost:9527
在浏览器中访问: http:// localhost:9527
分配 (Distribution)
# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview
# Build production environment
npm run build:prod
目录结构 (Directory structure)
├── build // build
├── config // config
├── src // source code
│ ├── api // all requests
│ ├── assets // static resource like themes, fonts
│ ├── components // global public components
│ ├── directive // global directive
│ ├── filters // global filters
│ ├── mock // mock data
│ ├── router // router
│ ├── store // global status management
│ ├── styles // global styles
│ ├── utils // global public functions
│ ├── view // view
│ ├── App.vue // entry view
│ └── main.js // entry for loading components, initialization
├── static // third-party libraries not packed with Webpack
│ └── Tinymce // rich text
├── .babelrc // babel-loader config
├── eslintrc.js // eslint config
├── .gitignore // gitignore
├── favicon.ico // favicon
├── index.html // html template
└── package.json // package.json
变更日志 (Changelog)
Detailed changes for each release are documented in the release notes.
发行说明中记录了每个发行版的详细更改。
国家管理 (State Management)
Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.
Vuex仅管理用户和应用程序配置的状态。 其他数据由其自己的业务页面管理。
演示版 (Demo)
两因素认证,支持微信和QQ (Two-factor authentication, supporting WeChat and QQ)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif)
实时切换主题 (Realtime switching themes)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif)
标签 (tabs)
![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)
折叠边栏 (Collapsing sidebar)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif)
拖放表 (Drag & drop table)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif)
互动桌 (Interactive table)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif)
上传裁剪的头像 (Uploading cropped avatar)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif)
错误记录 (Error log)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif)
富文本(与Qiniu,水印和自定义集成) (Rich text (integrated with Qiniu, watermark and customization))
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif)
包装台组件 (Packaging table component)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif)
图表 (Charts)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif)
导出到Excel (Exporting to Excel)
![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png)
翻译自: https://vuejsexamples.com/vue2-0-admin-a-management-system-template/
vue.js 管理系统模板