我在以前的项目中一直使用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，感觉嵌入的紧密感更强一些，调用也更简单，感兴趣的小伙伴们可以试试。
极速赛车五码稳赢技巧某项设置 _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，感觉嵌入的紧密感更强一些，调用也更简单，感兴趣的小伙伴们可以试试。
支付宝扫一扫
微信扫一扫
