You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

168 lines
5.9 KiB

5 years ago
  1. <p align="center">
  2. <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
  3. </p>
  4. <p align="center">
  5. <a href="https://github.com/vuejs/vue">
  6. <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg" alt="vue">
  7. </a>
  8. <a href="https://github.com/ElemeFE/element">
  9. <img src="https://img.shields.io/badge/element--ui-2.3.0-brightgreen.svg" alt="element-ui">
  10. </a>
  11. <a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
  12. <img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
  13. </a>
  14. <a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
  15. <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  16. </a>
  17. <a href="https://github.com/PanJiaChen/vue-element-admin/releases">
  18. <img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
  19. </a>
  20. </p>
  21. 简体中文 | [English](./README.md)
  22. ## 简介
  23. `vue-element-admin` 是一个后台集成解决方案,它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证等很多功能特性,相信不管你的需求是什么,本项目都能帮助到你。
  24. - [在线访问](http://panjiachen.github.io/vue-element-admin)
  25. - [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
  26. - [Gitter讨论组](https://gitter.im/vue-element-admin/discuss)
  27. - [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
  28. - [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate)
  29. **本项目的定位是后台集成方案,不适合当基础模板来开发。**
  30. - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)  
  31. - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
  32. **注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+**
  33. ## 前序准备
  34. 你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
  35. 同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目
  36. - [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
  37. - [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
  38. - [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
  39. - [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
  40. - [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
  41. - [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
  42. 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西
  43. **如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr**
  44. **本项目并不是一个脚手架,更倾向于是一个集成解决方案**
  45. **该项目不支持低版本浏览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
  46. <p align="center">
  47. <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
  48. </p>
  49. ## 功能
  50. ```
  51. - 登录/注销
  52. - 权限验证
  53. - 多环境发布
  54. - 动态侧边栏(支持多级路由)
  55. - 动态面包屑
  56. - 国际化多语言
  57. - 多种动态换肤
  58. - 快捷导航(标签页)
  59. - 富文本编辑器
  60. - Markdown编辑器
  61. - JSON编辑器
  62. - Screenfull全屏
  63. - 列表拖拽
  64. - Svg Sprite 图标
  65. - Dashboard
  66. - 本地mock数据
  67. - Echarts 图表
  68. - Clipboard(剪贴复制)
  69. - 401/404错误页面
  70. - 错误日志
  71. - 导出excel
  72. - 导出zip
  73. - 前端可视化excel
  74. - 树形table
  75. - Table example
  76. - 动态table example
  77. - 拖拽table example
  78. - 内联编辑table example
  79. - Form example
  80. - 二步登录
  81. - SplitPane
  82. - 拖拽 Dialog
  83. - Dropzone
  84. - Sticky
  85. - CountTo
  86. - Markdown2html
  87. ```
  88. ## 开发
  89. ```bash
  90. # 克隆项目
  91. git clone https://github.com/PanJiaChen/vue-element-admin.git
  92. # 安装依赖
  93. npm install
  94.    
  95. # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
  96. npm install --registry=https://registry.npm.taobao.org
  97. # 启动服务
  98. npm run dev
  99. ```
  100. 浏览器访问 http://localhost:9527
  101. ## 发布
  102. ```bash
  103. # 构建测试环境
  104. npm run build:sit
  105. # 构建生成环境
  106. npm run build:prod
  107. ```
  108. ## 其它
  109. ```bash
  110. # --report to build with bundle size analytics
  111. npm run build:prod --report
  112. # --preview to start a server in local to preview
  113. npm run build:prod --preview
  114. # lint code
  115. npm run lint
  116. # auto fix
  117. npm run lint -- --fix
  118. ```
  119. 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/deploy)
  120. ## Changelog
  121. Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
  122. ## Online Demo
  123. [在线 Demo](http://panjiachen.github.io/vue-element-admin)
  124. ## Donate
  125. 如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
  126. ![donate](https://panjiachen.github.io/donate/donation.png)
  127. [Paypal Me](https://www.paypal.me/panfree23)
  128. ## License
  129. [MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
  130. Copyright (c) 2017-present PanJiaChen