vue常见错误

• 删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js):
• 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加

module.exports = {
lintOnSave: false
}

参考

• 项目启动报错：Trailing spaces not allowed no-trailing-spaces
• 错误原因：ESLint检查到了多余的空格
• 解决方案：通常是删除了根组件App.vue中的默认代码后还有多余空格，删除多余的空格即可；或者配置.eslintrc.js，找到rules，添加如下：

rules: {
'no-irregular-whitespace': 'off'
}

参考

• vite构建vue项目，使用vscode打开后，出现红色波浪线；应取消vue模板校验：设置 -> 取消勾选'Vetur>Validation:template'

• 根组件app.vue的template标签中使用引入的子组件HelloWorld.vue时如果报错，子组件中模板应使用单根组件形式，子组件必须使用闭合标签

• vue-cli构建的vue项目，运行依赖和开发依赖的区别：dependencies运行依赖是项目上线后需要用到的依赖，devDependencies是项目上线后不会用到的依赖

• cli构建项目后启动报错：Syntax Error: TypeError: this.getOptions is not a function

# 如果项目中使用了sass，需安装依赖sass-loader、node-sass；若项目中使用less，需安装依赖less-loader、less
# 错误原因：sass-loader或less-loader版本太高
# 解决方案：卸载sass-loader或less-loader，重新安装低版本
npm uninstall --save sass-loader           # 终端卸载
npm remove less-loader          # 终端卸载
cnpm uninstall xxx --save         # 卸载
# 也可以使用cmd输入vue ui打开vue工作台卸载
cnpm i xxx@3.0.0 --save        # 安装指定版本
npm install less-loader@5.0.0       # 安装less-loader
npm install sass-loader@7.0.3        # 安装sass-loader
npm install xxx –-save       安装并写入package.json的”dependencies”中
npm install xxx -–save-dev  安装并写入package.json的”devDependencies”中
# 使用以上方式安装会安装成运行依赖，应安装开发依赖；在项目的package.json文件中dependencies表示运行依赖，devDependencies表示开发依赖
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"element-ui": "^2.4.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^4.1.1",
"less-loader": "^5.0.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11"
}
# 将dependencies中的那一行剪切到devDependencies

• cnpm报错：cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1

• 解决方案：管理员的身份打开powershell，输入：set-ExecutionPolicy RemoteSigned 选择A 参考

• 报错：Node Sass version 6.0.1 is incompatible with ^4.0.0.

# 解决方案：
node-sass npm uninstall node-sass         # 卸载之前的版本
npm install node-sass@4.14.1          # 卸载后安装4.0.0版本

参考

• 启动报错：Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 12.x

• 解决方案：卸载node sass后重新安装 参考

• 项目中有双引号和分号，启动时会报警告，在项目根目录中新建一个.prettierrc文件，用于去除分号，使用单引号

{
"semi": false,
"singleQuote": true
}

# 之后在项目中，右键 -> 格式化文档，即可去除页面中的分号和双引号

• 在项目中方法名和括号之间没有空格会报警告，如下

methods: {
resetLoginForm () {
console.log(this.loginFormRef)
}
}

• 解决方案：关闭eslintrc中的校验

rules: {
'space-before-function-paren': 0
}