创建Vue3+TS+vite项目，处理报红问题💥
小杨 2023/10/31 Vue3
# VsCode安装相关插件
# Vue Language Features(Volar)：
- 对 .vue 文件进行实时的类型错误反馈
# TypeScript Vue Plugin(Volar)：
- 支持在 TS 中 导入 .vue文件 （import *.vue）
- 如果不安装或禁用该插件，就是这样的：
# vue-tsc介绍
- 这个工具是在创建项目时自带的，负责打包时最终的类型检查
- 先执行 vue-tsc，再进行打包
# 创建项目：
# 方式一：pnpm create vue@latest
- 这种方式安装的时候，Vue3、Vite都是最新版的，而且打开文件不报红
# 方式二：npm init vue@latest
- 按照最后的指令打开项目文件夹、安装依赖、启动项目即可，你也可以在启动项目之前运行npm run format使用Prettier对src下面的文件格式修复
只会对 src 下面的文件进行格式修复
# 方式三：npm ctarte vite@latest 项目名称 -- --template vue-ts
- 按照最后的指令打开项目文件夹、安装依赖、启动项目即可，你也可以在启动项目之前运行npm run format使用Prettier对src下面的文件格式修复
说明
- npm create vite@latest：基于最新版本的 vite 进行项目的创建
- -- --template vue-ts：选择 Vue + TS 的开发模板
- 最后按照提示命令进入项目，安装依赖，启动项目即可
# 三种方式对比
# 方式一
优点
- 命令简洁；
- 安装的都是最新版本的；
- ❗ 创建项目之后文件不会报红（重点）； 缺点
- pnpm 对 node版本有要求😂，可以使用nvm或volta对node版本进行切换
# 方式二
优点
- 我们可以选择安装一些依赖（VueRouter、Pinia、Prettier、ESLint...），提升开发速率，像VueRouter 和 Pinia 就不用我们自己去配置了，直接使用现成的
- 我们可以直接去使用 @ 表示 src 缺点
- 有些文件会报红，需要我们手动去进行一些配置的修改或添加一些配置（很简单😂😂😂😂，按照 第二章 中的步骤操作即可，搞一次就能记住了）
# 方式三
缺点
- 不能选择依赖，只能创建完成之后自己去下载
- 不能使用 @ 导入文件
# 修改配置：
# 方式二：
- 我们打开项目的时候，可能会遇到一些奇葩问题，像什么 找不到xxx模块、没有"node"模块解析策略、还有在导入文件时显示不能以.ts结尾等等
vite.config.ts文件 报 找不到xxx模块
解决办法
- 目标文件：tsconfig.node.json
- 将该字段的值修改为 node 即可
tsconfig.app.json文件 报 没有"node" 模块解析策略xxx
- 模块解析策略，ts默认用node的解析策略，即相对的方式导入, 可选值：node、classic 如果未指定，则 --module commonjs 默认为 node，否则默认为 classic（包括 --module 设置为 amd、system、umd、es2015、esnext 等） Node 模块解析是 TypeScript 社区中最常用的，推荐用于大多数项目。 如果您在 TypeScript 中遇到导入和导出的解析问题，请尝试设置 moduleResolution: “node” 以查看它是否解决了问题。
问题：
解决办法：
# 方式三：
文件报红展示：
- 在没有 "node" 模块解析策略的情况下，无法指定选项 "-resolveJsonModule",将 属性值 修改为 node 即可”
在修改完成之后，又会有新的报红：
原因:
- 该选项用于控制是否允许在 import 语句中导入 .ts 文件扩展名，它的取值可以是 true 或 false。但是，从 TypeScript 3.8 开始，这个选项已经被废弃了；
解决办法：
- 删除该配置项即可
# 创建项目完毕之后，删除多余的文件，配置文件报红
- 在我们创建项目完成之后，要些自己的页面，所以一些原项目带的文件我们就不需要了，比如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/**/*" 匹配
解决办法：
- 关闭编译器，重新打开项目
