iview安装使用以及遇到的问题汇总（持续更新）
安装：
npm install iview --save
引入：
1.全局引用
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css' //iview的样式文件，必须引入
Vue.use(iView);
2.按需引入
// 在需要的地方按需引入
import Vue from 'vue';
import { Button, Table } from 'iview';
Vue.component('Button', Button);
import 'iview/dist/styles/iview.css'//需要在main.js中引入
Vue.component('Table', Table);
3.遇到的问题
Parsing error: x-invalid-end-tag
在使用iview的过程中都是参考官方文档，但是这里有个很大的坑，在我们看到的文档有英文版和中文版，中文版里给出的案例都是在线引用的方式的例子，而我们是在vue中作为项目引入的，所以不能参照中文版，这里推荐大家看英文版就好了，其次在引入iview后我们会发现在项目中使用Col和Input标签时，vscode的语法检查会报错，这里我先声明一下我用的eslint的检测以及vetur作为模板规范，和两款插件都会让iview的部分标签报错，这里给出解决办法
首先在.eslintrc.js中添加如下配置
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
这句话会关闭eslint的语法报错，让我们执行npm run dev 时可以顺利通过
但是仅仅这样还是不够的，我们还有vetur这个模板格式化插件会报错，这里我们在文件->首选项->设置里找到setting.json这个配置文件，添加下面这行来关闭vetur的检查，到这里就可以了，我们还需要重新跑一下程序，并重新打开报错的文件，你会发现红色消失了。
"vetur.validation.template": false
第二个问题，main.js中引入iview后，运行项目报错，告诉我们iview未定义，看到错误的我一脸懵逼，上面不是清清楚楚定义好的吗，怎么就报错了，折腾了一番后发现是被官方文档坑了。
import iView from 'iview';
我们很自然的引入iview，但是文档告诉我们，我们还可以在.babelrc文件中通过配置来进行局部引入，我就很乖巧的也去配置了一下，结果可想而知，就产生了上面的问题，当我们确定全局引用时，这个配置文件我们是不需要的，因为它会引起冲突，所以这里还要请大家注意。
第三个问题，验证input输入框输入数值时验证数值上限和下限
在type='number'的格式下进行自定义验证规则：
<FormItem label="数字验证"
prop="threshold">
<Input v-model="formValidate.threshold"
type="number"
placeholder="单位1dB"
style="width:120px">
</Input>
</FormItem>
在data中自定义验证规则：
const validateMobile = (rule, value, callback) => {
if (parseInt(value) < 0) {
callback(new Error('数值不能为负'))
} else {
callback()
}
}
然后在下面校验规则上添加自定义的规则
ruleValidate{
threshold: [
{ required: true, message: '输入数字', trigger: 'blur' },
{ validator: validateMobile, trigger: 'blur' }
]
}
第四个问题 在模态框中添加表单，更改模态框自己的点击行为，先验证表单，严重通过后在关闭模态框。
- 因为iview自带的模态框当点击取消或者确定按钮后，会默认将模态框的状态置为false，即取消模态框。
- 当我们想要在弹出框中加一些表单验证的话就需要先严重表单，再关闭模态框，于是我们就需要更改默认方式。
首先我们在methods中定义改变加载状态的方法
changeLoading () {
// 避免点击确定模态框直接关闭
this.loading = false
this.$nextTick(() => {
this.loading = true
})
},
然后在我们的表单数据验证通过后将对话框隐藏
setTimeout(() => {
this.changeLoading()
// 清空表单，避免下次残留上次的值(这一部分看自己需求)
this.handleReset('formValidate')
this.modal1 = false
this.$Message.success({
content: '指令发送成功',
duration: 1
})
}, 500)
// 如果验证失败可以在函数中返回 ，调用下面这句，具体逻辑视情况而定
return this.changeLoading()