1. 新建 vue3 项目

根据 vue3 官方文档，新建 vue3 项目。
我新建的一个 vite + vue3 + ts + eslint + premitter + pinia 项目，新建时相关选项选择 yes 即可。按文档所述，火速运行起来。

initVue3.png

2. 发现 ts 报错

运行起来之后，点进 main.ts 以及其他引用了 vue 文件的地方发现报错。Cannot find module 'xxx.vue' or its corresponding type declarations.ts(2307)。
报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件

• 解决方案一（引用自 https://zhuanlan.zhihu.com/p/406510652）：
  在项目根目录或 src 文件夹下创建一个名为 shims-vue.d.ts 的文件，并写入以下内容：

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const componentOptions: ComponentOptions
  export default componentOptions
}

但是，点击引用的 vue 文件，会跳转到这个文件，不能跳转到引用的相应文件。

• 解决方案二（引用自 https://blog.csdn.net/lx1996082566/article/details/121595946）：
  可能是当前使用 ts 版本不对。安装 volar 插件，并且 按 F1，输入 typeselect -> volar: select typescript version。选择 use workspace......
  
  image.png
  
  
  image.png
  
  完美，不报错。

Tips：关于安装 volar 插件
输入 volar ，有多个扩展程序，能起作用的是 Typescript Vue Plugin（Volar）。

image.png

之前 vscode 检测到 vue3 ，自动推荐安装了 Vue Language Feature（Volar），但用它扔有类型报错。官方推荐，使用 它 时禁用 Vetur，以免有冲突。

image.png