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
  }
 

• vue-cli + vue启动项目时报错，报错如下：

npm ERR! code EEXIST
npm ERR! path C:\Users\chnq\Desktop\demo03\node_modules\@types\mini-css-extract-plugin\node_modules\@types\webpack\node_modules\.bin\webpack.ps1       
npm ERR! Refusing to delete C:\Users\chnq\Desktop\demo03\node_modules\@types\mini-css-extract-plugin\node_modules\@types\webpack\node_modules\.bin\webpack.ps1: ../../../../_webpack@5.65.0@webpack/bin/webpack.js symlink target is not controlled by npm C:\Users\chnq\Desktop\demo03\node_modules\@types\mini-css-extract-plugin\node_modules\@types\webpack\node_modules\webpack
npm ERR! File exists: C:\Users\chnq\Desktop\demo03\node_modules\@types\mini-css-extract-plugin\node_modules\@types\webpack\node_modules\.bin\webpack.ps1
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chnq\AppData\Roaming\npm-cache\_logs\2021-12-13T07_13_27_762Z-debug.log
PS C:\Users\chnq\Desktop\demo03> npm install vue-print-nb --save

• 解决方案：通过第3行的报错信息，打开文件夹进入C:\Users\chnq\Desktop\demo03\node_modules\@types\mini-css-extract-plugin\node_modules\@types\webpack\node_modules，删除该文件夹内的文件

• 参考

• 初始化项目，删除默认代码后，报错：

This dependency was not found:
 
* @/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 
To install it, you can run: npm install --save @/components/HelloWorld.vue

• 错误原因：在删除根组件中的默认代码和子组件HelloWorld.vue后，其他文件中有引入子组件HelloWorld.vue的步骤，导致找不到该子组件
• 解决方案：根据提示，找到view文件夹中的文件，删除引入HelloWorld.vue的代码