記錄--iview 使用爬坑-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前段時間公司需要開發一個后臺管理系統，時間比較急迫，一兩天時間，想一想自己一點一點的搭建起來可能性不太大，就想著有沒有現成的可以改一改，就找到了基于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/

這里面就是我們要撰寫的展示頁面了，

三、render的使用：

新手使用iview表格中的render也許會遇到的問題

iview的使用和element-ui相似，但在表格中控制元件的使用上兩者有很大不同，element-ui在表格中是用插槽渲染模板，而iview是使用傳統的render渲染HTML頁面，

使用element-ui的好處是，它相對比較成熟，也就是所謂的坑少功能強，但是在表格中使用控制元件(Select, input, button, switch等)時，由于是模板渲染所以冗余代碼較多，特別遇到每列都有控制元件的，就不夠簡潔，

但是iview使用render雖然簡潔，可是按照官方的例子很容易一不小心進坑，

以下是官網檔案

                {
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h  ('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ]);
                    }
                },
                {
                    title: 'Action',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, 'View'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }

非常易懂，其中render里創建的標簽 Icon、Button 等都是iview的控制元件，第一次使用時的我照葫蘆畫瓢，使用 Select、Switch，雙雙碰壁，

從根源上抓問題就是 render 函式了，它其實就相當于 creatElement 創建一個標簽，而 Icon、Button 這些控制元件渲染之后標簽名剛好就是本身；但是 Select、Switch 渲染之后的 HTML 其實是 span 或者 div 標簽，然后 class 名上系結樣式和事件，

所以不推崇這樣系結標簽，而是系結控制元件，也就是 import 進來的控制元件，

正確用法為：

                {
                    title: 'Name',
                    key: 'name',
                    render: (h, params) => {
                        return h('div', [
                            h  (Icon, {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.name)
                        ]);
                    }
                },
                {
                    title: 'Action',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(Button, {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, 'View'),
                            h(Button, {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.index)
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }