之前项目中一直使用jQuery+bootstrap，使用VueCLI3.0之后接触了iview，自此抛弃了jQuery+bootstrap的组合，iview是纯vue写的，非常的适合在VueCLI3.0中使用，下面将介绍VueCLI3.0集成iview的使用方法，和一些实用技巧。

概念介绍

VueCLI3.0是vue的脚手架工具，可以快速的搭建项目原型，是一款非常好用的vue工具，集成众多前端组件包括：vue、vuex、vue-router、webPack等，俗称为vue全家桶。

iview是一套基于vue.js的高质量UI组件库，主要服务于 PC 界面的中后台产品。

特点：

丰富的组件和功能，满足绝大部分网站场景

提供开箱即用的 Admin 系统 和 高阶组件库，极大程度节省开发成本

友好的 API ，自由灵活地使用空间

细致、漂亮的 UI

详细的文档

可自定义主题

谁在使用：

阿里巴巴

百度

腾讯

今日头条

京东

滴滴出行

美团

新浪

联想

科大讯飞

引入View UI插件

1.Npm安装view ui

	$ npm install view-design –save

也可以利用VueCLI3.0提供的可视化配置界面，直接在插件中搜索iview，安装后即可使用。

2.main.js中引入插件

一般在webPack入口文件，main.js中配置如下：

	import ViewUI from 'view-design';
	import 'view-design/dist/styles/iview.css';
	Vue.use(ViewUI);

也可以按需要引入，这样打包时可以缩减文件体积。

首先安装babel-plugin-import，并在文件 .babelrc 中配置：

	npm install babel-plugin-import --save-dev
	// .babelrc
	{
	 "plugins": [["import", {
	 "libraryName": "view-design",
	 "libraryDirectory": "src/components"
	 }]]
	}

然后这样按需引入组件

	import { Button, Table } from 'view-design';
	Vue.component('Button', Button);
	Vue.component('Table', Table);

按需引用仍然需要导入样式，即在 main.js 文件添加以下代码

	import 'view-design/dist/styles/iview.css';

VueCLI3.0中iview的使用

项目中为了使用方便，可以在iview的基础上进行二次封装组件，这样使用起来就方便了，iview包括一系列完整的组件库，导航、表单和试图等等，本人针对其中的Menu导航菜单、table和upload组件做了二次封装，其他组件的使用可以参考iview官方网站（https://www.iviewui.com/docs/introduce）。

1. Menu导航菜单

定义模板

	<Menu theme="light" :open-names="[navList[0].url]" width="100" @on-select="navigateTo" @on-open-change="navChange" accordion>
	 <Submenu v-for="(item,i) in navList" :key="i" :index="item.name" :name="item.url">
	 <template slot="title">
	 <Icon type="ios-people" />
	 {{item.name}}
	 </template>
	 <MenuItem v-for="(navItem,navI) in item.children" :key="navI" :index="navItem.name" :name="navItem.url">
	 <Icon type="ios-stats" />
	 {{navItem.name}}
	 </MenuItem>
	 </Submenu>
	 </Menu>

定义菜单数据

	navList:[
	 {
	 name:"用户管理",url:"1",children:[
	 {name:"用户管理1",url:"/1"},
	 {name:"用户管理2",url:"/2"},
	 ]
	 },
	 {
	 name:"设备管理",url:"2",children:[
	 {name:"设备1",url:"/1"},
	 {name:"设备2",url:"/2"},
	 ]
	 },
	 ],

2. table

固定表头的table

模板

	 <Table border ref="table" :columns="columns" :data="data" @on-selection-change="handleSelectRow()" @on-row-click="rowClick"
	 :highlight-row="true" :loading="loading" :max-height="tableHeight"></Table>

外部调用时传递的参数

	 props:{
	 columns:{
	 default:[]
	 },
	 data:{
	 default:[]
	 },
	 height:{
	 default:0
	 },
	 loading:{
	 default:false
	 }
	 }

组件调用外部函数方法，点击行触发事件

	rowClick(colum,index){
	 this.$emit('selectedRow', colum)
	},

如果表格行嵌套调用其他组件的话

通过给 columns 数据设置一项，指定 type: 'expand'，即可开启扩展功能。

给行数据 data 的某项设置 _expanded 为 true，可以默认展开当前行，设置 _disableExpand 可以禁用当前行的展开功能。

引入组件

	import expandRow from './table-expand.vue';

在列的第一个参数定义如下

	 {
	 type: 'expand',
	 width: 50,
	 render: (h, params) => {
	 return h(expandRow, {
	 props: {
	 row: params.row
	 }
	 })
	 }
	 },

效果图

3. upload文件上传

模板

	<Upload
	 :before-upload="handleUpload"
	 :action="Url"
	 :on-success='handleSuccess> <Button icon="ios-cloud-upload-outline">上传文件</Button>
	 </Upload>

handleUpload方法，在文件上传后进行处理，后手动进行提交。

handleUpload (file)
if(file){
this.files.push(file);
}
return false;
},

进行手动上传：

Upload(){
var data = new FormData();
let _this= this;
//此处可以上传多个文件
for(var i=0;i< _this.files.length;i++){
data.append("file", _this.files[i]);
}
this.$axios({
method: 'post',
url: ‘http://×××’,
data: data,
headers: {
'Content-Type': 'multipart/form-data;charset=UTF-8'
}
}).then(function(res){})；
}

此处文件上传本人遇到两个问题说一下：

• 如果是单文件上传可以直接使用iview upload的上传功能，this.$refs.upload.post(file)，如果是多个文件可以使用循环多次post上传，但是这样做总感觉不妥，因为有时希望一次请求上传多个文件，此方法就不符合要求了。
• 使用formData进行上传时，可以手动多次append ‘file’字段进行多文件上传，此时使用axios进行上传时需要设置请求头，'Content-Type': 'multipart/form-data;charset=UTF-8'。此方法也有另外一个好处，如果只修改表单内容，不上传文件的话，使用iview upload的post方法无法进行提交，会报上传文件为空的错误。而使用axios可以解决此问题。

总结

以上就是VueCLI3.0集成iview的整个过程，其中列举了比较常用的menu、table和upload组件，还有其他好多常用组件可以参考iview官网。经过实测iview还是非常好用的，比bootstrap要好一些，element ui 也很不错，但是和VueCLI3.0集成的话，首推iview，感觉嵌入的紧密感更强一些，调用也更简单，感兴趣的小伙伴们可以试试。