我在以前的项目中一直使用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接口的中后台产品提供服务。
特点：
丰富的组件和功能，适用于大多数网站的场景
提供开箱即用的管理员系统和高端组件库，大幅降低开发成本
友好的API，自由灵活的空间使用
精致美丽的UI
详细文档
可以定制主题
谁在使用：
阿里巴巴
百度
腾讯集团
今天的标题
京东
滴滴出行
美团
新浪
联想集团
科大讯飞
引入View UI插件
1.Npm安装视图用户界面$ npminstallview -设计保存
也可以使用VueCLI3.0提供的可视配置界面，直接通过插件搜索iview，并在安装后使用。
2 .在2.main.js中导入插件
通常，web包门户文件main.js的配置如下：
从“视图-设计”导入视图用户界面；
导入视图-设计/距离/样式/视图. CSS '；
用户界面(视图用户界面)；
也可以根据需要导入。 这样可以在打包时减少文件的体积。
首先安装babelrc插件导入，并将其配置为. babelrc文件。
npminstallbabel -插入-导入- -保存- dev
//.babelrc
{
“插件”:
“库名称”:“视图-设计”，
“库目录”:“src /组件”
() ]
}
然后，根据需要部署组件
导入，从表中查看-设计；
vue.com ponent ('按钮'，按钮)；
vue.com ponent (“表”，表)；
按需引用需要导入样式。 也就是说，在main.js文件中添加以下代码
导入视图-设计/距离/样式/视图. CSS '；
在
VueCLI3.0中iview的使用
项目中，为了便于使用，可以根据iview对组件进行二次封装，从而变得容易使用。 iview包括一系列完整的组件库、导航、窗体、尝试等，本人对其中的Menu导航菜单、table、upload组件进行了二次封装，其他组件1 .菜单导航菜单
模板的定义
menu theme=' light ' :打开名称=' [ navlist [0].URL ] ' width=' 100 ' @打开选择='导航到' @打开-打开
子菜单v-for=' (项目，I ) in navlist ' :密钥=' I ' :索引='项目名称' 3360名称='项目. URL '
模板插槽=' title '
icon类型=' IOs -人物' /
项目名称
/模板
单元v-for=' (nav项目，navI ) in item.children ' :密钥navI ' 3360索引=' Nav项目名称' 3360名称=' Navi
icon type=' IOs -状态' /
nav项目名称
/MenuIt
em> </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，感觉嵌入的紧密感更强一些，调用也更简单，感兴趣的小伙伴们可以试试。