前言

VsCode安装相关插件

• Vue Language Features(Volar)：
  • 对 .vue 文件进行实时的类型错误反馈；
  • 
• TypeScript Vue Plugin(Volar)：
  • 支持在 TS 中 导入 .vue文件 （import *.vue）；
  • 
  • 如果不安装或禁用该插件，就是这样的：
    • 

vue-tsc介绍

• vue-tsc：
  • 这个工具是在创建项目时自带的，负责打包时最终的类型检查；
  • 
  • 先执行 vue-tsc，再进行打包；
    • 

一、创建项目

• 其实，创建 Vue3 + Vite + TS 的项目和创建 Vue3 + JS的项目基本一致，不同点就是运行命令之后的选择的配置不同；
• ❗ 注意：
  • 在我们创建项目的过程中，建议大家将 Prettier 和 ESLint 都选上，提高我们代码的规范性，在公司写代码的时候，有时候因为代码的不规范会出现各种鬼畜的Bug（有时候遇到的还不一定能解决掉😭😭😭😭）；
• 关于 Prettier 的配置大家可以参考我的另一篇文章前端代码格式化 - 【Prettier】 - 常见配置 + 踩坑日记（后续会慢慢更新的，当前遇到的问题比较少）；
• 我自己更喜欢第一种常见方式；

1.1、✅✅🌈🌈 方式一：pnpm create vue@latest

• 🌈🌈🌈 强烈推荐这种方式，打开文件之后不会报红，真的爽啊 😁😁😁；
  • 这种方式安装的时候，Vue3、Vite都是最新版的；
• 命令：
  • pnpm create vue@latest；
• 
• 这是 pnpm 显示的界面：

1.2、✅ 方式二: npm init vue@latest

• 命令：npm init vue@latest
• 按照最后的指令打开项目文件夹、安装依赖、启动项目即可，你也可以在启动项目之前运行npm run format使用Prettier对src下面的文件格式修复；
  • 只会对 src 下面的文件进行格式修复；
  • 

1.3、❌ 方式三: npm create vite@latest 项目名称 -- --template vue-ts

• 创建项目的命令：
  • npm ctarte vite@latest 项目名称 -- --template vue-ts；
• 说明：
  • npm create vite@latest：
    • 基于最新版本的 vite 进行项目的创建；
  • -- --template vue-ts：
    • 选择 Vue + TS 的开发模板；
• 最后按照提示命令进入项目，安装依赖，启动项目即可；

1.4、三种项目创建方式（方式二 + 方式三）的对比

• 方式一 - pnpm xxx：
  • 优点：
    • 命令简洁；
    • 安装的都是最新版本的；
    • ❗ 创建项目之后文件不会报红（重点）；
  • 缺点：
    • pnpm 对 node版本有要求😂，这个小问题哈，可以使用nvm对node版本进行切换；
• 方式二 - npm init xxx：
  • 优点：
    • 我们可以选择安装一些依赖（VueRouter、Pinia、Prettier、ESLint...），提升开发速率，像VueRouter 和 Pinia 就不用我们自己去配置了，直接使用现成的；
    • 最重要的一点就是，看图中绿色选中的部分，方式一创建的，我们可以直接去使用 @ 表示 src；
      • 
  • 缺点：
    • 有些文件会报红，需要我们手动去进行一些配置的修改或添加一些配置（很简单😂😂😂😂，按照 第二章 中的步骤操作即可，搞一次就能记住了）；
• 方式三 - npm create xxx：
  • 缺点：
    • 不能选择依赖，只能创建完成之后自己去下载；
    • 不能使用 @ 导入文件；
      • 
• 

二、修改配置

2.1、方式二

• 我们打开项目的时候，可能会遇到一些奇葩问题，像什么 找不到xxx模块、没有"node"模块解析策略、还有在导入文件时显示不能以.ts结尾等等；
• 我有强迫症😂😂😂，看见文件报红就难受，所以我每次创建好项目之后，都会点进去看看 ts 文件有没有报红；
• 一般使用 方式二 创建的文件就会有下面两种报红，按照提示修改即可；

2.1.1、 vite.config.ts文件 报 找不到xxx模块

• 问题：
  • 
• 解决方法：
  • 目标文件：tsconfig.node.json
  • 将该字段的值修改为 node 即可；
  • 

2.1.1、 tsconfig.app.json文件 报 没有"node" 模块解析策略xxx

模块解析策略，ts默认用node的解析策略，即相对的方式导入, 可选值：node、classic

如果未指定，则 --module commonjs 默认为 node，否则默认为 classic（包括 --module 设置为 amd、system、umd、es2015、esnext 等）

Node 模块解析是 TypeScript 社区中最常用的，推荐用于大多数项目。 如果您在 TypeScript 中遇到导入和导出的解析问题，请尝试设置 moduleResolution: “node” 以查看它是否解决了问题。

• 问题：
  • 
• 解决方法：
  • 

2.2、方式三

• 文件报红展示：
  • 
  • “在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule"”：
    • 将 属性值 修改为 node 即可；
• 在修改完成之后，又会有新的报红：
  • 
  • 原因：
    • 该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名，它的取值可以是 true 或 false。但是，从 TypeScript 3.8 开始，这个选项已经被废弃了；
  • 解决方法：
    • 删除该配置项即可；

2.3、创建项目完毕之后，删除多余的文件，配置文件报红

• 在我们创建项目完成之后，要些自己的页面，所以一些原项目带的文件我们就不需要了，比如HelloWord.vue、AboutView.vue等等，但是在我们将这些多余的文件删除，有可能会在 tsconfig.app.json 中报红：

  找不到文件“d:/Table top/vue-ts-pro-2/src/components/HelloWorld.vue”。程序包含该文件是因为: 通过在 "d:/Table top/vue-ts-pro-2/tsconfig.app.json" 中的包含模式 "src/**/*" 匹配

• 解决方法：
  • 关闭编译器，重新打开项目应该就可以了哈，我的就是重新打开之后就好了😂😂😂；