後臺前端解決方案vue-element-admin的安裝及使用

簡介

vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui 實現。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中後臺產品原型。更多詳情參考官方文檔。

安裝

# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 進入項目目錄
cd vue-element-admin

# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 本地開發 啓動項目
npm run dev

最終效果：

基礎模板

vue-element-admin項目集成了很多可能用不到的功能，會造成不少的代碼冗餘。所以我們以vue-admin-template爲基礎模板，通過複製vue-element-admin項目的內容添加到基礎模板中，從而實現符合自己需要的後臺管理項目。

# 克隆項目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 進入項目目錄
cd vue-admin-template

# 建議不要直接使用 cnpm 安裝以來，會有各種詭異的 bug。可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啓動服務
npm run dev

最終效果：

整合到其它vue項目

我用vue-cli創建了一個vue項目，現在要把該後臺管理系統整合vue項目中，我選擇的是用複製的方法複製一個個視圖文件。

首先其它vue項目要先安裝好element-ui，然後把後臺管理系統的視圖文件根據自己的需要複製vue項目中，在後臺管理系統源碼的src文件夾下，還有該系統自帶的一些圖標、腳本文件，如下圖：

部分視圖文件需要依賴src/文件夾裏的icons/、utils/等文件夾裏的內容，複製時根據需要複製這些文件夾及內容到其它vue項目中。