开启eslint，关于import自定义组件报错问题

先看报错和代码import Header from 'components/header/Header.vue'经过各种尝试发现改成 import Header from '@/components/header/Header.vue'后无报错了经查询发现 webpack.base.config.js 中已经定义好了关于@符表示项目中的src之后出于好奇试...

萌新不会永远是萌新

18784人浏览 · 2018-03-21 16:01:38

萌新不会永远是萌新 · 2018-03-21 16:01:38 发布

先看报错和代码
这里写图片描述

import Header from 'components/header/Header.vue'

经过各种尝试发现改成 import Header from '@/components/header/Header.vue'后无报错了

经查询发现 webpack.base.config.js 中已经定义好了关于@符表示项目中的src
这里写图片描述

之后出于好奇试了一下关闭eslint时关于import自定义组件是什么样子的
首先关闭eslint选项 config –> index.js里面找到 useEslint: true, 将他改为false 再执行 npm run dev 就好了啦

再然后更改代码（我尝试了三种）
1. import Header from '@/components/header/Header.vue
2. import Header from './components/header/Header.vue
3. import Header from 'components/header/Header.vue

实践证明在关闭eslint后 import 进自定义组件上述前两种都是正确的，第三个报错(和文章开头一样的错误)

文章最后再啰嗦一下，在eslint开启下这里写图片描述比方组件里面属性名要用单引号，否则会报错。如果eslint关闭的情况下使用，则无此限制

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^