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
