這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前段時間公司需要開發一個後臺管理系統，時間比較急迫，一兩天時間。想一想自己一點一點的搭建起來可能性不太大，就想著有沒有現成的可以改一改，就找到了基於Vue.js和iview組件庫的現成後臺，拿來改改就可以了 iview admin。 一、 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前段時間公司需要開發一個後臺管理系統，時間比較急迫，一兩天時間。想一想自己一點一點的搭建起來可能性不太大，就想著有沒有現成的可以改一改，就找到了基於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')
]);
}
}
好像沒啥區別？對沒錯把引號去掉。引號裡面寫標簽名，什麼 div、span 那些，整個控制項傳進來的時候不要引號。
關於 Select
既然說到iview的table了那就說說Select這個控制項吧。做項目的時候幾乎所有人都踩到了同一個坑 --> 咦？！我的id傳回來了怎麼沒綁上去嘞！這個坑真的難找，我們看看官方文檔中，Select是這麼寫的：
這一切看起來那麼的美好~~
but !!!!! 我怎樣在綁定的時候賦上number類型的值捏？
一般的，我們如果想v-model輸出number值，我們會這麼做：
<input v-model.number="count" type="number">
so..... iview 中 Select 的文檔里並木有 type 這個 props , 自己加肯定是不行的。所以number類型的值無法綁上去吖......， 預設類型都是string。這會造成介面給你個 10, 你的 option 里對應的是 '10'，然後預設值變成了空。
這裡我實在沒想到解決辦法，我就.....我就默默地把介面傳回來的數值類型通通toString()了 ( T-T 委屈 ，希望有小伙伴能給出更好的方法，不要醬紫暴力 )
另外Select真的是奇怪耶！文檔上寫的是:
非 template/render 模式下，需使用 i-select、i-option
然而事實是：
管你什麼模式都需要用 i-select、i-option ！
本文轉載於:
https://juejin.cn/post/6844903655926136846
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
