## 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{
}
}
```
