ESLint 不知道 Element 的组件 UI

Question

我正在使用 Vue.js 和元素 UI。当我使用 Element UI 组件时，例如 Input 或 Col，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> or <col> 都不是元素 UI 组件。

它们都是原生 HTML 标签，而且都是自闭合标签，不能那样使用。

元素 UI 使用 <el-input>，而不是 <input>。
元素 UI 使用 <el-col>，而不是 <col>。
要在 <el-input> 中添加图标，请使用下面显示的 prefix-icon 属性或 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>

ESLint 不知道 Element 的组件 UI

ESLint is not aware of components of Element UI

javascript

eslint

vue.js

vue-component

element-ui