创建项目时,控制台出现报错信息,页面中代码空格引起的,具体原因还是eslint校验:
报错信息:
先来看下Vue的版本:
Vue4.0中安装使用eslint的两种方式:
1、使用npm安装
npm install eslint --save-dev
2、安装 vue 专门的 ESLint 规则插件 @vue/cli-plugin-eslint
npm i @vue/cli-plugin-eslint --save-dev
3、添加配置文件
配置文件常用的方法有两种:
3-1、在 package.json
中添加
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"plugins": ["example"],
"env": {
"example/custom": true
}
}
}
3-2、在项目根目录添加独立的配置文件.eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
parserOptions: {
parser: "babel-eslint"
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"indent": ["error", 2]
}
};
如何取消eslint的校验呢?
创建vue.config.js文件:
module.exports = {
devServer: {
overlay: {
warnings: false,
errors: false
}
}
}
然后重启项目