ESLint不知道Element UI的组件

Question

我使用Vue.js和Element UI。当我使用诸如Input或Col之类的Element UI组件时，ESLint认为invalid-end-tag如下所示。

我已经设置了eslint-plugin-vue，所以为什么ESLint不知道自定义组件?
有解决这个错误的方法吗?

<template>
<div>
<Input
v-model="formLogin.username"
type="text"
size="large"
@on-enter="handleLogin"
>
<Icon
slot="prepend"
type="ios-person-outline"
/>
</Input>
</div>
</template>

Parsing error: x-invalid-end-tag. eslint(vue/no-parsing-error) [13, 5]

Answer 1

<input>和<col>都不是Element UI组件。

它们都是原生HTML标签，它们都是自关闭标签，不能这样使用。

• 元素UI使用<el-input>，而不是<input>。

• 元素UI使用<el-col>，而不是<col>。

• 要在<el-input>中添加图标，请使用prefix-iconprop或prefix插槽，如下所示

正确示例:

<el-row>
<el-col :span="12">
<el-input
v-model="input"
>
<i slot="prefix" class="el-input__icon el-icon-user"></i>
</el-input>
</el-col>
</el-row>

<script>
export default {
data() {
return {
input: ''
}
}
}
</script>