之前项目中一直使用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官方网站（）。

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: ‘){})；}此处文件上传本人遇到两个问题说一下：

如果是单文件上传可以直接使用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，感觉嵌入的紧密感更强一些，调用也更简单，感兴趣的小伙伴们可以试试。

打赏

微信扫一扫，打赏作者吧～