# 介紹 [](https://github.com/vuejs/vue)[](https://github.com/ElemeFE/element)[](https://travis-ci.org/PanJiaChen/vue-element-admin)[](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)[](https://github.com/PanJiaChen/vue-element-admin/releases)[](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)[](https://github.com/PanJiaChen/vue-element-admin) [vue-element-admin](http://panjiachen.github.io/vue-element-admin)是一個后臺前端解決方案，它基于[vue](https://github.com/vuejs/vue)和[element-ui](https://github.com/ElemeFE/element)實現。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后臺產品原型。相信不管你的需求是什么，本項目都能幫助到你。 > ## 建議 > > 本項目的定位是后臺集成方案，不太適合當基礎模板來進行二次開發。因為本項目集成了很多你可能用不到的功能，會造成不少的代碼冗余。如果你的項目不關注這方面的問題，也可以直接基于它進行二次開發。 > > * 集成方案:[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) > * 基礎模板:[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) > * 桌面終端:[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) > * Typescript 版:[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)(鳴謝:[@Armour](https://github.com/Armour)) > * Others:[awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD)功能 ~~~ - 登錄 / 注銷 - 權限驗證 - 頁面權限 - 指令權限 - 權限配置 - 二步登錄 - 多環境發布 - 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 ~~~ ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%89%8D%E5%BA%8F%E5%87%86%E5%A4%87)前序準備 你需要在本地安裝[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/)、[vue-cli](https://github.com/vuejs/vue-cli)、[axios](https://github.com/axios/axios)和[element-ui](https://github.com/ElemeFE/element)，所有的請求數據都使用[Mock.js](https://github.com/nuysoft/Mock)進行模擬，提前了解和學習這些知識會對使用本項目有很大的幫助。 同時配套一個系列的教程文章，如何從零構建后一個完整的管理后臺項目，建議大家先看完這些文章再來實踐本項目。 * [手摸手，帶你用 vue 擼后臺 系列一(基礎篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) * [手摸手，帶你用 vue 擼后臺 系列二(登錄權限篇)](https://juejin.im/post/591aa14f570c35006961acac) * [手摸手，帶你用 vue 擼后臺 系列三 (實戰篇)](https://juejin.im/post/593121aa0ce4630057f70d35) * [手摸手，帶你用 vue 擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) * [手摸手，帶你用 vue 擼后臺 系列五(v4.0 新版本)](https://juejin.im/post/5c92ff94f265da6128275a85) * [手摸手，帶你封裝一個 vue component](https://segmentfault.com/a/1190000009090836) * [手摸手，帶你優雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) * [手摸手，帶你用合理的姿勢使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806) * [手摸手，帶你用合理的姿勢使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc) **本項目不支持低版本瀏覽器(如 ie)，有需求請自行添加 polyfill[詳情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84)目錄結構 本項目已經為你生成了一個完整的開發框架，提供了涵蓋中后臺開發的各類功能和坑位，下面是整個項目的目錄結構。 ~~~ ├── build # 構建相關 ├── mock # 項目mock 模擬數據 ├── plop-templates # 基本模板 ├── public # 靜態資源 │ │── favicon.ico # favicon圖標 │ └── index.html # html模板 ├── src # 源代碼 │ ├── api # 所有請求 │ ├── assets # 主題 字體等靜態資源 │ ├── components # 全局公用組件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 項目所有 svg icons │ ├── lang # 國際化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局樣式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有頁面 │ ├── App.vue # 入口頁面 │ ├── main.js # 入口文件 加載組件 初始化等 │ └── permission.js # 權限管理 ├── tests # 測試 ├── .env.xxx # 環境變量配置 ├── .eslintrc.js # eslint 配置項 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自動化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ~~~ ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85)安裝 ~~~ # 克隆項目 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 ~~~ > ## TIP > > 強烈建議不要用直接使用 cnpm 安裝，會有各種詭異的 bug，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。若還是不行，可使用[yarn](https://github.com/yarnpkg/yarn)替代`npm`。 > > Windows 用戶若安裝不成功，很大概率是`node-sass`安裝失敗，[解決方案](https://github.com/PanJiaChen/vue-element-admin/issues/24)。 > > 另外因為`node-sass`是依賴`python`環境的，如果你之前沒有安裝和配置過的話，需要自行查看一下相關安裝教程。 啟動完成后會自動打開瀏覽器訪問[http://localhost:9527](http://localhost:9527/)， 你看到下面的頁面就代表操作成功了。  接下來你可以修改代碼進行業務開發了，本項目內建了典型業務模板、常用業務組件、模擬數據、HMR 實時預覽、狀態管理、國際化、全局路由等等各種實用的功能來輔助開發，你可以繼續閱讀和探索左側的其它文檔。 > ## 建議 > > 你可以把`vue-element-admin`當做工具箱或者集成方案倉庫，在`vue-admin-template`的基礎上進行二次開發，想要什么功能或者組件就去`vue-element-admin`那里復制過來。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#contribution)Contribution 本文檔項目地址[vue-element-admin-site](https://github.com/PanJiaChen/vue-element-admin-site)基于[vuepress](https://github.com/vuejs/vuepress)開發。 有任何修改和建議都可以該項目 pr 和 issue [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)還在持續迭代中，逐步沉淀和總結出更多功能和相應的實現代碼，總結中后臺產品模板/組件/業務場景的最佳實踐。本項目也十分期待你的參與和[反饋](https://github.com/PanJiaChen/vue-element-admin/issues)。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E6%8D%90%E8%B5%A0)捐贈 如果你覺得這個項目幫助到了你，你可以幫作者買一杯果汁表示鼓勵 ??[Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#browsers-support)Browsers Support Modern browsers and Internet Explorer 10+. | [](http://godban.github.io/browsers-support-badges/) IE / Edge | [](http://godban.github.io/browsers-support-badges/) Firefox | [](http://godban.github.io/browsers-support-badges/) Chrome | [](http://godban.github.io/browsers-support-badges/) Safari | | --- | --- | --- | --- | | IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%85%B6%E5%AE%83)其它 群主**[圈子](https://jianshiapp.com/circles/1209)**群主會經常分享一些技術相關的東西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602)或者關注[微博](https://weibo.com/u/3423485724?is_all=1)。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#vue-%E7%94%9F%E6%80%81%E5%9C%88)Vue 生態圈 **首先了解這些 vue 生態圈的東西，會對你上手本項目有很大的幫助。** 1. [Vue Router](https://router.vuejs.org/)是 vue 官方的路由。它能快速的幫助你構建一個單頁面或者多頁面的項目。 2. [Vuex](https://vuex.vuejs.org/)是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。它能解決你很多全局狀態或者組件之間通信的問題。 3. [Vue Loader](https://vue-loader.vuejs.org/)是為 vue 文件定制的一個 webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件。它能在開發過程中使用熱重載來保持狀態，為每個組件模擬出 scoped CSS 等等功能。不過大部分情況下你不需要對它直接進行配置，腳手架都幫你封裝好了。 4. [Vue Test Utils](https://vue-test-utils.vuejs.org/)是官方提供的一個單元測試工具。它能讓你更方便的寫單元測試。 5. [Vue Dev-Tools](https://github.com/vuejs/vue-devtools)Vue 在瀏覽器下的調試工具。寫 vue 必備的一個瀏覽器插件，能大大的提高你調試的效率。 6. [Vue CLI](https://cli.vuejs.org/)是官方提供的一個 vue 項目腳手架，本項目也是基于它進行構建的。它幫你分裝了大量的 webpack、babel 等其它配置，讓你能花更少的精力在搭建環境上，從而能更專注于頁面代碼的編寫。不過所有的腳手架都是針對大部分情況的，所以一些特殊的需求還是需要自己進行配置。建議先閱讀一遍它的文檔，對一些配置有一些基本的了解。 7. [Vetur](https://github.com/vuejs/vetur)是 VS Code 的插件. 如果你使用 VS Code 來寫 vue 的話，這個插件是必不可少的。