vite初始化react项目并搭建开发环境

好的，以下是使用 Vite 初始化 React 项目并搭建开发环境的步骤：

1. 首先需要安装 Node.js 和 npm，如果已经安装可以跳过此步骤。在终端输入以下命令安装：

# 使用 nvm 安装 Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 刷新终端
source ~/.bashrc

# 安装 Node.js
nvm install node

2. 安装 Vite。在终端输入以下命令：

npm install -g vite

3. 初始化 React 项目。在终端输入以下命令：

# 在当前目录下初始化项目
vite init react my-project

4. 进入项目目录。在终端输入以下命令：

cd my-project

5. 安装依赖。在终端输入以下命令：

npm install

6. 启动开发环境。在终端输入以下命令：

npm run dev

现在你已经成功搭建了基于 Vite 的 React 开发环境，可以开始愉快地编写代码了！

相关问题

vite react ts 项目搭建

Vite是一个快速的前端构建工具，它采用了渐进式静态站点生成的方式，旨在提供更快的开发体验。React是一个流行的JavaScript库，用于构建用户界面。TypeScript（简称TS）是一种强类型的超集JavaScript语言，增加了类型安全。

要在Vite、React和TypeScript环境中搭建项目，你可以按照以下步骤操作：

1. **安装必要的依赖**:
- 首先确保已安装Node.js。然后，在终端或命令提示符下运行以下命令安装vite、react、ts以及相关的插件：

   npm install -D create-vite create-react-app typescript @vitejs/plugin-react typescript-plugin-jsx-playground

2. **创建项目**:
使用`create-vite`初始化一个新的Vite项目：

   npx create-vite my-vite-react-ts

这会自动配置基本的Vite设置。

3. **配置TypeScript**:
- 进入项目根目录，打开`vite.config.ts`文件，并添加TypeScript配置：

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';

   export default defineConfig({
     plugins: [react()],
     build: {
       target: 'esnext',
     },
     compilerOptions: {
      jsx: 'react',
       typescript: true,
     },
   });

4. **启用React支持**:
Vite默认不直接支持React，所以需要添加上述`@vitejs/plugin-react`插件。

5. **启动项目**:
在项目根目录下运行 `npm run dev` 或 `yarn dev` 启动开发服务器。

6. **编写React组件**:
在`src`目录下创建`.tsx`文件（如`App.tsx`），开始编写React组件并使用TypeScript。

7. **测试**:
如果有需求，可以安装例如`ts-jest`等测试库进行单元测试。