簡體中文 | English
簡介
vue-element-admin 是一個后台前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內置了 i18n 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后台產品原型。相信不管你的需求是什么，本項目都能幫助到你。
-
Gitee 在線預覽（國內用戶可訪問該地址）
-
國內訪問文檔 文檔（方便沒翻牆的用戶查看）
-
基礎模板建議使用: vue-admin-template
-
桌面端: electron-vue-admin
-
Typescript 版: vue-typescript-admin-template (鳴謝: @Armour)
目前版本為 v4.0+ 基於 vue-cli 進行構建，若發現問題，歡迎提issue。若你想使用舊版本，可以切換分支到tag/3.11.0，它不依賴 vue-cli
該項目不支持低版本瀏覽器(如 ie)，有需求請自行添加 polyfill 詳情
群主 圈子 群主會經常分享一些技術相關的東西，或者加入 qq 群 或者關注 微博
前序准備
你需要在本地安裝 node 和 git。本項目技術棧基於 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的請求數據都使用Mock.js進行模擬，提前了解和學習這些知識會對使用本項目有很大的幫助。
同時配套了系列教程文章，如何從零構建后一個完整的后台項目，建議大家先看完這些文章再來實踐本項目
- 手摸手，帶你用 vue 擼后台 系列一(基礎篇)
- 手摸手，帶你用 vue 擼后台 系列二(登錄權限篇)
- 手摸手，帶你用 vue 擼后台 系列三 (實戰篇)
- 手摸手，帶你用 vue 擼后台 系列四(vueAdmin 一個極簡的后台基礎模板)
- 手摸手，帶你封裝一個 vue component
- 手摸手，帶你優雅的使用 icon
- 手摸手，帶你用合理的姿勢使用 webpack4（上）
- 手摸手，帶你用合理的姿勢使用 webpack4（下）
如有問題請先看上述使用文檔和文章，若不能滿足，歡迎 issue 和 pr
Sponsors
Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]
Admin Dashboard Templates made with Vue, React and Angular.
功能
- 登錄 / 注銷
- 權限驗證
- 頁面權限
- 指令權限
- 權限配置
- 二步登錄
- 多環境發布
- dev sit stage prod
- 全局功能
- 國際化多語言
- 多種動態換膚
- 動態側邊欄（支持多級路由嵌套）
- 動態面包屑
- 快捷導航(標簽頁)
- Svg Sprite 圖標
- 本地/后端 mock 數據
- Screenfull全屏
- 自適應收縮側邊欄
- 編輯器
- 富文本
- Markdown
- JSON 等多格式
- Excel
- 導出excel
- 導入excel
- 前端可視化excel
- 導出zip
- 表格
- 動態表格
- 拖拽表格
- 內聯編輯
- 錯誤頁面
- 401
- 404
- 組件
- 頭像上傳
- 返回頂部
- 拖拽Dialog
- 拖拽Select
- 拖拽看板
- 列表拖拽
- SplitPane
- Dropzone
- Sticky
- CountTo
- 綜合實例
- 錯誤日志
- Dashboard
- 引導頁
- ECharts 圖表
- Clipboard(剪貼復制)
- Markdown2html
開發
# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 進入項目目錄
cd vue-element-admin
# 安裝依賴
npm install
# 建議不要直接使用 cnpm 安裝以來，會有各種詭異的 bug。可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 啟動服務
npm run dev
瀏覽器訪問 http://localhost:9527
發布
# 構建測試環境
npm run build:stage
# 構建生產環境
npm run build:prod
其它
# 預覽發布環境效果
npm run preview
# 預覽發布環境效果 + 靜態資源分析
npm run preview -- --report
# 代碼格式檢查
npm run lint
# 代碼格式檢查並自動修復
npm run lint -- --fix
更多信息請參考 使用文檔
Changelog
Detailed changes for each release are documented in the release notes.
Online Demo
Donate
如果你覺得這個項目幫助到了你，你可以幫作者買一杯果汁表示鼓勵 🍹
Browsers support
Modern browsers and Internet Explorer 10+.
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
License
Copyright (c) 2017-present PanJiaChen