从 0~1 创建 Vue3 + TS + Vite 项目（两个必装的插件 + 两种项目创建方式 + 项目创建完毕之后的文件报红）

前言

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、✅ 方式一: npm init vue@latest

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

1.2、❌ 方式二: 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.3、两种项目创建方式的对比

• 方式一 ：
  • 优点 ：
    • 我们可以选择安装一些依赖（VueRouter、Pinia、Prettier、ESLint...），提升开发速率，像VueRouter 和 Pinia 就不用我们自己去配置了，直接使用现成的；
    • 最重要的一点就是，看图中绿色选中的部分，方式一创建的，我们可以直接去使用 @ 表示 src ；
      • 
  • 缺点 ：
    • 有些文件会报红，需要我们手动去进行一些配置的修改或添加一些配置（很简单😂😂😂😂，按照 第二章 中的步骤操作即可，搞一次就能记住了）；
• 方式二 ：
  • 缺点 ：
    • 不能选择依赖，只能创建完成之后自己去下载；
    • 不能使用 @ 导入文件；
      • 

二、修改配置

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 开始，这个选项已经被废弃了；
  • 解决方法：
    • 删除该配置项即可；