环境配置
前端的一些大型项目都使用脚手架开发，脚手架需要借助node环境。
终端输入 node -v 即可查看当前node版本。
如果电脑没有node环境，必须进行安装。
构建工具与脚手架
构建工具
前端的脚手架工具都会依赖底层的构建工具，构建工具运行才node.js环境里、具有热更新、解析一些前端特殊语法、项目打包等功能。
常见的构建工具有 react脚手架、vue脚手架用到的webapck、新一代构建工具vite。
vite是vue团队开发的，基于es module，是webpack效率的10倍。
脚手架
目前react的脚手架有很多，比如react官方用webpack搭建的create-react-app脚手架、阿里搭建的umi脚手架及vite内置的create-vite脚手架。
create-vite是基于vite的一个脚手架，预设了vue、react等多个框架的代码模板。
为什么使用create-vite脚手架？
vite开发体验好，速度快。create-vite无需额外配置、上手简单；
使用create-vite脚手架创建项目
安装vite
全局安装
npm i vite -g
// 或
yarn add vite -g
安装create-vite
yarn create vite
按照上图提示创建项目，注意项目名不能有空格
安装相关依赖
创建好项目后，需要执行依赖安装命令
npm i
npm i 是 npm install命令的简写
安装好依赖后，项目后多一个node_modules文件夹。
启动项目
终端输入
npm run dev
打开控制台的链接即可看到效果
终止项目
要想终止项目，在控制台按 ctrl + c 即可。
项目结构
一个最简单的项目结构如图
react-demo
├─ public
│ └─ vite.svg
├─ src
│ ├─ App.css
│ ├─ App.tsx
│ ├─ assets
│ │ └─ react.svg
│ ├─ index.css
│ ├─ main.tsx
│ └─ vite-env.d.ts
├─ .eslintrc.cjs
├─ .gitignore
├─ index.html
├─ package-lock.json
├─ package.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts
public
这个文件夹内放的东西不会被构建工具打包，一般用来放网站的图标或者全局配置文件。
eslintrc.cjs
代码格式化校验的配置项，为了使代码编写的更加规范。
gitignore
git提交的忽略文件配置项
index.html
打包后，项目的主入口文件，也是react根节点挂载的文件。
package.json
项目的依赖配置文件，所有安装的依赖都会在这里提现，一些仓库的配置也在这里读取。
package-lock.json
项目依赖锁定文件。防止依赖自动升级，导致项目无法启动
tsconfig.json
项目的ts配置文件，针对src下面的所有ts文件生效。
tsconfig.node.json
项目的ts配置文件，针对vite.config.ts文件。
vite.config.ts
vite构建工具的配置项，在这里可以使用一些第三方插件，做一些项目的配置。
src
项目的核心代码文件夹，之后所有的代码都会写在这里。
assets
静态资源文件夹，用来放图片或者json数据。
main.tsx
项目主入口
App.tsx
自定义的第一个组件
App.css及index.css
样式文件，可以删除
vite-env.d.ts
ts声明文件
