iview admin 使用爬坑

前段時間公司須要開發一個後臺管理系統，時間比較急迫，一兩天時間。想想本身一點一點的搭建起來可能性不太大，就想着有沒有現成的能夠改一改，就找到了基於Vue.js和iview組件庫的現成後臺，拿來改改就能夠了 iview admin。

1、介紹：

1. iview UI組件庫是基於Vue.js的UI組件庫（相比之下你們都知道的）。

2. iview admin 引用iview admin文檔的介紹：iView-admin是iView生態中的成員之一，是一套採用先後端分離開發模式，基於Vue的後臺管理系統前端解決方案。iview_admin預覽   iview_admin文檔     iview_admin github地址

2、使用：

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的同窗會很容易上手，開發效率很高。