使用vite搭建一个React项目！真香！

环境配置

前端的一些大型项目都使用脚手架开发，脚手架需要借助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声明文件