## 5. 將界面交給第三方UI庫
> iview官網:https://www.iviewui.com/
為節省開發時間，我們往往會使用一些第三方ui庫，比如iview elementui等
我們在這里只介紹iview,其他ui庫大同小異
### iview的安裝與引入
#### 安裝
```js
cnpm i iview --save
```
#### 按需引入組件
官網說，需要下載插件才能按需引入，[官網說明](https://www.iviewui.com/docs/guide/start#AXYY)，但是不下好像也可以正常引入
```js
//在main.js文件中引入項目需要的組件
import {Button,Table,Message} from 'iview'
//然后注冊組件
Vue.component('Button',Button)
Vue.component('Table',Table)
Vue.component('Message',Message)
```
這樣注冊的話太繁瑣，所以需要優化一下
```js
//main.js
import {Button,Table,Message} from 'iview'
const iviewComs={Button,Table,Message}
Object.keys(iviewComs).forEach(key=>{Vue.component(key,component[key])})
```
代碼都寫在main.js中顯得太擁擠，我們可以把代碼拿出去，寫成一個插件
我們在components文件夾中新建一個文件`iview-coms`，用來放iview中引入的組件
```js
//components/iview-coms.js
import {Button,Table,Message} from 'iview'
const components={Button,Table,Message}
const install = function(Vue, opts = {}){
Object.keys(components).forEach(key=>{
Vue.component(key,components[key])
})
}
export default install
```
然后在main.js中引入,`use`這個插件
```js
import iviewComs from './components/iview-coms'
Vue.use(iviewComs)
```
ok了，接下來看自定義主題
####自定義主題
官網鏈接：https://www.iviewui.com/docs/guide/theme
原理很簡單，就是把ivew的less文件引入，并且覆蓋掉，然后在main.js文件中引入自己的less文件
首先，我們需要下載解析less文件的loader ,`less`和`less-loader`，這里有個坑，下載less的時候要下載3版本以下的，不然會報一堆錯誤
```shell
cnpm i less@2.7.2 less-loader -D
```
下載完就ok了，不需要在webpack中進行配置，因為已經配置好了
然后，在assets/styles/base.less(沒有需要自己新建)中，引入iview的樣式文件,并且覆蓋掉
默認變量列表：https://github.com/iview/iview/blob/2.0/src/styles/custom.less
```js
//assets/styles/base.less
//------ 引入iview樣式
@import '~iview/src/styles/index.less';
//------ 覆蓋iview的樣式
@primary-color: #E91E63;
@error-color : #FF3300;
```
最后在main.js引入該less文件
```js
//main.js
import './assets/styles/base.less'
```
此時，引入的組件就可以在.vue文件中使用了，看一下效果：
ok了。最后還要補充一下，在項目開發過程中，不可避免的要覆蓋iview默認的樣式，我們分為兩種情況，一種是全局覆蓋，一種是局部覆蓋。
全局覆蓋的話我們要新建一個less文件，比如叫`cover-iview.less`所有覆蓋iview樣式的代碼都放在這里,然后在base.less中引入這個文件。
局部覆蓋的話要注意不要影響到別的樣式，所以要充分利用less的作用域,例如我們只需要改home頁面下的iview按鈕樣式，我們可以這樣：
```less
.home{
.ivu-btn{
}
}
```
