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`等测试库进行单元测试。