开发环境搭建

目录

• 项目结构介绍
• FAQ:
• 命令介绍
• 其他
  • 1.tsconfig配置
  • 2.env.d.ts

使用npm init vite 新建项目。

项目结构介绍

• public 公共目录

• src

  assets 静态资源

  App.css 根组件样式

  App.tsx 根组件

  index.css 全局css文件

  main.tsx 全局tsx文件

  vite-env.d.ts 声明文件（三斜线指令，各种文件后缀类型的声明，让ts认识这是什么类型的文件）

• .eslintrc.cjs eslint配置文件（规范代码格式）

• .gitignore git忽略文件

• index.html vite项目入口文件index.html,webpack是mainjs

• package.json 项目依赖模块文件

• package-lock.json 缓存和锁版本号。会对比版本，如果nodemoudle里已经存在就不用下载了。

• tsconfig.json 项目的ts配置文件，范围为src下面的ts文件

• tsconfig.node.json vite-ts配置文件

• vite.config.ts vite配置文件

FAQ:

1. public公共目录和assets静态资源有什么区别?

   public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译

2. 为什么main.tsx的document.getElementById('root')!要加一个!

   因为document.getElementById('root')返回可能为空，这时候就会报错。!是非空断言，告诉编辑器这个表达式不会为空。

命令介绍

会去node_modules下.bin下面的vite里面找⇒没有就找全局⇒环境变量

"dev": "vite",//启动开发模式项目
"build": "tsc && vite build", //打包构建生产包
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",//代码检查
"preview": "vite preview" //预览模式

eslint命令详解

eslint .：对当前目录（以及子目录）中的文件运行 ESLint。
--ext ts,tsx：指定要检查的文件扩展名为 .ts 和 .tsx，即 TypeScript 和 TypeScript React 文件。
--report-unused-disable-directives：报告未使用的 eslint-disable 指令。这可以帮助你清理不再需要的 ESLint 禁用指令。
--max-warnings 0：将警告数量限制为 0。如果有任何警告，ESLint 将返回非零退出代码，这通常用于在 CI/CD 环境中确保代码库没有任何警告。

其他

1.tsconfig配置

tsconfig.json、tsconfig.app.json 与 tsconfig.node.json

参考：

TypeScript 配置全解析：tsconfig.json、tsconfig.app.json 与 tsconfig.node.json 的深度指南-CSDN博客 文章浏览阅读810次，点赞25次，收藏31次。TypeScript 配置全解析：tsconfig.json、tsconfig.app.json 与 tsconfig.node.json 的深度指南_tsconfig.node.json https://blog.csdn.net/ttod/article/details/149330875

2.env.d.ts

/// <reference types="vite/client" />三斜线声明作用：

1. 引用类型声明文件：使 TypeScript 了解一些类型信息，这些类型信息可以在其他文件中使用。/hui
2. 项目范围的全局声明：为整个项目提供全局的类型声明
3. 参考：

https://segmentfault.com/q/1010000044942822