初识Vue3遇到的报错及解决方案

482 阅读1分钟

1、全局安装create-vite-app时报错

  • yarn global add create-vite-app@1.18.0报错
  • found incompatible module,版本不兼容 微信图片_20231011162355.png
  • 解决方案:运行yarn config set ignore-engines true后,再yarn global,即可成功安装

2、Vue3的Template支持多个标签,但多标签后报错

  • The template root requires exactly one element,这个template只能有一个根标签 微信图片_20231011173900.png
  • 解决方案:先检查是否有Vetur插件;若有,在文件-首选项-设置里搜eslint,将Template选项取消勾选后,报错取消 微信图片_20231012102344.png

3、小问题:引入文件时报错

  • 我将一个命名为Lanlan.vue的文件引入时报错 微信图片_20231011174542.png
  • 估计是我整个文件名为lanlan-ui,故识别有误,换一个名字就好

4、在ts文件中引入vue文件报错

  • 找不到该vue模块 微信图片_20231011193348.png
  • 原因:TypeScript只能理解.ts文件,无法理解.vue文件
  • 解决方案:新建一个xxx.d.ts文件,里面写上让TypeScript理解.vue文件的内容,即可 微信图片_20231012111132.png

5、<style lang="scss"></style>报错

  • 报错:找不到sass模块 微信图片_20231016191747.png
  • 解决:对应在终端yarn add sass即可
  • 但又出现一个报错:Dep优化失败,出现错误 微信图片_20231016192919.png
  • 解决:打开package.json文件,将"sass:"1.26.10"从dependencies挪到devDependencies 微信图片_20231016193243.png
  • 或者在add时yarn add -D sass

6、引入provide、inject时报错

  • 该报错不影响运行,说是没有provide、inject 微信图片_20231016193551.png
  • 解决:禁用vuter插件,启用Vue Language Features(Volar)插件,重启即可
  • 原因:vuter插件是配套Vue2的,对ts几乎没有支持;Volar插件是配套Vue3的,功能更强