前段時間公司需要開發一個後臺管理系統，時間比較急迫，一兩天時間。想一想自己一點一點的搭建起來可能性不太大，就想著有沒有現成的可以改一改，就找到了基於Vue.js和iview元件庫的現成後臺，拿來改改就可以了 iview admin。
一、介紹：
1. iview UI元件庫是基於Vue.js的UI元件庫（相比之下大家都知道的）。
2. iview admin 引用iview admin文件的介紹：iView-admin是iView生態中的成員之一，是一套採用前後端分離開發模式，基於Vue的後臺管理系統前端解決方案。iview_admin預覽 iview_admin文件 iview_admin github地址
二、使用：
1. 目錄結構：
從github克隆下來的原始專案就是這樣一個結構。
config/ （專案開發配置檔案，主要用於區分開發環境和生產環境）
node_modules/ （專案依賴）
public/ （存放主入口檔案 index.html）
src/ (資原始檔，這裡面內容比較多)
還有一個比較重要的檔案就是根目錄下的：vue.config.js
這個是vue配置檔案，和vue cli2.x不通，這裡使用的是vue cli3，所有的webpack配置都在這裡配置。
其他的一些檔案和資料夾一般使用還用不到。
2. config/
config/ 資料夾下面有兩個檔案:
env.js
export default 'development'
複製程式碼url.js
import env from './env'
const DEV_URL = 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/'const PRO_URL = 'https://produce.com'
export default env === 'development' ? DEV_URL : PRO_URL複製程式碼這裡主要是用於區分開發環境和線上環境的請求介面基礎url。
3. public/
public/ 資料夾下面只有一個檔案，那就是index.html內容輸出的入口檔案。
4. src/
4-1. src/api/
其中data.js 中是所有資料請求的函式，routers.js路由請求函式，user.js是使用者登入、獲取使用者資訊、退出登入的請求方法。在iview admin中是將所有的請求方法分類放在一起，哪裡需要再在哪裡呼叫，而不是散佈在各個頁面裡面，這樣利於維護修改。
比如user.js中：
4-2. src/assets/
src/assets/ 下存放的都是圖片等一些靜態資源等等。
4-3. src/components/
src/components/ 下面是iview admin已經封裝好的一些可以直接呼叫的組建。
4-4. src/config/ 專案內配置檔案，裡面已經有的配置是cookie儲存時長，是否使用國際化配置。
4-5. src/directive/ 一直專案自定義指令
4-6. src/libs/
在這裡主要在強調一下，在axios.js中iview_admin作者對請求方法進行了封裝處理：
這裡對響應進行了攔截處理，如果你在使用時成功請求後並沒有約定好返回碼欄位為code或者成功後要返回code:200 那你使用他的請求就算在控制檯Network看到請求成功資料返回，但是你列印出來的結果會是false，要不就和後臺按照他的約定好，要不就改一下原始碼。
tools.js和util.js都是一下工具函式。
4-7. src/locale/ 存放國際化配置檔案，如果不使用國際化，則不需要關心。
4-8. src/mock/ mock資料，在沒有接入真實開發環境時，克隆下來的專案使用的都是mock的加資料。
4-9. src/router/ routers.js 路由配置檔案，在這裡需要注意使用者的許可權配置：
例如：
使用者的許可權配置必須是一個陣列。
4-10. src/store/ 這裡是整個專案狀態管理的地方，使用了vuex狀態管理工具，不瞭解的同學可以看看 vux官方文件。
4-11. src/view/ 這裡面就是我們要編寫的展示頁面了。
總結：一點粗淺經驗，有什麼不對的請大家指正。iview admin是一套基於vue的後臺管理系統前端框架，真正實現了前後端分離，熟練使用過vue的同學會很容易上手，開發效率很高。