介紹

vue-element-admin?是一個后臺前端解決方案，它基于?vue?和?element-ui實現。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后臺產品原型。相信不管你的需求是什么，本項目都能幫助到你。

建議

本項目的定位是后臺集成方案，不太適合當基礎模板來進行二次開發。因為本項目集成了很多你可能用不到的功能，會造成不少的代碼冗余。如果你的項目不關注這方面的問題，也可以直接基于它進行二次開發。

• 集成方案:?vue-element-admin
• 基礎模板:?vue-admin-template
• 桌面終端:?electron-vue-admin
• Typescript 版:?vue-typescript-admin-template?(鳴謝:?@Armour)
• Others:?awesome-project

?

#功能

- 登錄 / 注銷- 權限驗證- 頁面權限- 指令權限- 權限配置- 二步登錄- 多環境發布- 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

?

#前序準備

你需要在本地安裝?node?和?git。本項目技術棧基于?ES2015+、vue、vuex、vue-router?、vue-cli?、axios?和?element-ui，所有的請求數據都使用Mock.js進行模擬，提前了解和學習這些知識會對使用本項目有很大的幫助。

同時配套一個系列的教程文章，如何從零構建后一個完整的管理后臺項目，建議大家先看完這些文章再來實踐本項目。

• 手摸手，帶你用 vue 擼后臺 系列一(基礎篇)
• 手摸手，帶你用 vue 擼后臺 系列二(登錄權限篇)
• 手摸手，帶你用 vue 擼后臺 系列三 (實戰篇)
• 手摸手，帶你用 vue 擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)
• 手摸手，帶你用 vue 擼后臺 系列五(v4.0 新版本)
• 手摸手，帶你封裝一個 vue component
• 手摸手，帶你優雅的使用 icon
• 手摸手，帶你用合理的姿勢使用 webpack4（上）
• 手摸手，帶你用合理的姿勢使用 webpack4（下）

本項目不支持低版本瀏覽器(如 ie)，有需求請自行添加 polyfill?詳情

#目錄結構

本項目已經為你生成了一個完整的開發框架，提供了涵蓋中后臺開發的各類功能和坑位，下面是整個項目的目錄結構。

├── 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

#安裝

# 克隆項目 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?替代?npm。

Windows 用戶若安裝不成功，很大概率是node-sass安裝失敗，解決方案。

另外因為?node-sass?是依賴?python環境的，如果你之前沒有安裝和配置過的話，需要自行查看一下相關安裝教程。

?

啟動完成后會自動打開瀏覽器訪問?http://localhost:9527， 你看到下面的頁面就代表操作成功了。

接下來你可以修改代碼進行業務開發了，本項目內建了典型業務模板、常用業務組件、模擬數據、HMR 實時預覽、狀態管理、國際化、全局路由等等各種實用的功能來輔助開發，你可以繼續閱讀和探索左側的其它文檔。

?

建議

你可以把?vue-element-admin當做工具箱或者集成方案倉庫，在?vue-admin-template?的基礎上進行二次開發，想要什么功能或者組件就去?vue-element-admin?那里復制過來。

#Contribution

本文檔項目地址?vue-element-admin-site?基于?vuepress開發。

有任何修改和建議都可以該項目 pr 和 issue

vue-element-admin?還在持續迭代中，逐步沉淀和總結出更多功能和相應的實現代碼，總結中后臺產品模板/組件/業務場景的最佳實踐。本項目也十分期待你的參與和反饋。

#Vue 生態圈

首先了解這些 vue 生態圈的東西，會對你上手本項目有很大的幫助。

Vue Router?是 vue 官方的路由。它能快速的幫助你構建一個單頁面或者多頁面的項目。

Vuex?是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。它能解決你很多全局狀態或者組件之間通信的問題。

Vue Loader?是為 vue 文件定制的一個 webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件。它能在開發過程中使用熱重載來保持狀態，為每個組件模擬出 scoped CSS 等等功能。不過大部分情況下你不需要對它直接進行配置，腳手架都幫你封裝好了。

Vue Test Utils?是官方提供的一個單元測試工具。它能讓你更方便的寫單元測試。

Vue Dev-Tools?Vue 在瀏覽器下的調試工具。寫 vue 必備的一個瀏覽器插件，能大大的提高你調試的效率。

Vue CLI?是官方提供的一個 vue 項目腳手架，本項目也是基于它進行構建的。它幫你封裝了大量的 webpack、babel 等其它配置，讓你能花更少的精力在搭建環境上，從而能更專注于頁面代碼的編寫。不過所有的腳手架都是針對大部分情況的，所以一些特殊的需求還是需要自己進行配置。建議先閱讀一遍它的文檔，對一些配置有一些基本的了解。

Vetur?是 VS Code 的插件. 如果你使用 VS Code 來寫 vue 的話，這個插件是必不可少的。

總結

以上是生活随笔為你收集整理的vue-element-admin台前端解决方案: 基于 vue 和 element-ui实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。