【React框架】什么是 Vite？如何使用vite自动生成react的目录？

什么是 Vite？

Vite 是一个基于原生 ES Modules 开发的前端构建工具，由 Evan You（Vue 的作者）开发。它最大的特点包括：

极速冷启动：因为利用了浏览器原生的 ES Modules，所以在开发时无需等待整个打包过程。
高效热更新（HMR）：文件变更后只更新改动部分，极大提升开发效率。
简单配置：大部分项目即开箱即用，同时也支持灵活的配置和插件扩展。

使用 Vite 创建 React 项目

1. 确保环境准备

安装 Node.js（建议使用 LTS 版本）。
终端支持 npm、yarn 或 pnpm 之一。

2. 创建项目

在终端中执行以下命令即可通过 Vite 脚手架创建一个 React 项目模板：

使用 npm：

npm create vite@latest my-react-app -- --template react

使用 yarn：

yarn create vite my-react-app --template react

使用 pnpm：

pnpm create vite my-react-app --template react

上述命令会自动下载 Vite 模板，并生成一个名为 my-react-app 的项目目录。

3. 安装依赖

进入项目目录并安装依赖包：

cd my-react-app
npm install
# 或 yarn install / pnpm install

Vite 创建的 React 项目目录结构

创建完成后，项目的默认目录结构大致如下：

my-react-app/
├── node_modules/             # 依赖库
├── public/                   # 公共静态资源（直接被浏览器访问）
│   ├── favicon.svg           # 图标等资源文件
│   └── vite.svg              # 示例图片
├── src/                      # 源代码目录
│   ├── App.jsx               # 根组件，主要的应用逻辑
│   ├── main.jsx              # 应用入口文件，负责挂载 React 组件到 DOM
│   ├── index.css             # 全局样式文件
│   └── vite-env.d.ts         # Vite 默认提供的 TypeScript 类型声明（如果你使用 TypeScript，则包含在内）
├── .gitignore                # Git 忽略文件
├── index.html                # HTML 模板，Vite 会注入相关脚本和样式
├── package.json              # 项目配置以及依赖声明
├── README.md                 # 项目说明文档
└── vite.config.js            # Vite 配置文件，可在其中自定义构建、插件、服务器等配置

说明：

public/
放置静态资源，如图片、图标、manifest 等，Vite 不会对里面的资源做预处理，浏览器直接访问。
src/
主要源码存放处。main.jsx 作为入口文件，通过 ReactDOM.render()（或 React 18 的 createRoot）把 App.jsx 组件挂载到 index.html 中的 DOM 节点上。
index.html
作为模板文件，Vite 将在构建时注入打包后的脚本和样式，你可以在此处添加 meta 标签、链接外部资源等。
vite.config.js
配置文件用来定制 Vite 的行为，如插件配置、路径别名、开发服务器设置等。例如，可以配置插件 @vitejs/plugin-react 来增强 React 开发体验。

Vite 常用命令

在项目目录下，可以通过 package.json 中定义的脚本来运行常用命令：

启动开发服务器
```
npm run dev
```
这会启动一个本地开发服务器（默认端口 3000 或其他可用端口），支持实时热更新（HMR），在你修改代码后页面会自动更新。
构建生产版本
```
npm run build
```
该命令会把项目打包到 dist/ 目录下，使用 Rollup 进行构建和优化，生成用于部署的静态文件。
预览生产构建
```
npm run preview
```
在构建生产版本后，可通过该命令在本地启动一个模拟生产环境的服务器，方便你预览生产构建效果。

Vite 的自定义配置

在 vite.config.js 文件中，你可以进行各种自定义配置。例如：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],resolve: {alias: {'@': '/src', // 使用 @ 表示 src 目录},},server: {port: 3000,open: true, // 启动后自动打开浏览器},
});