vite react ts 组件库工程

要使用Vite、React和TypeScript来创建一个组件库工程，可以按照以下步骤进行：

1. 安装依赖[^1]:

   pnpm i react-dom@latest react@latest

2. 初始化项目结构:
- 创建一个用于存放项目的目录：

     mkdir react-ui-teaching
     cd react-ui-teaching

- 使用`vite`初始化一个新的项目，同时指定使用TypeScript:

     npx create-vite --template typescript

3. 设置up Tsconfig和全局配置：
- 在`vite.config.ts`中配置 TypeScript 编译选项：

     import { defineConfig } from 'vite';
     // ... vite配置
     build: {
       target: 'esnext',
       minify: false,
       sourcemap: true,
     },
     // ... 其他配置
     plugins: [
       // 添加Ts插件
       require.resolve('vite-plugin-ts'),
     ],
     // ... 其他配置
     resolve: {
       alias: {
         '@': './src', // 或者你的实际源码路径
       },
     },
   }

4. 创建组件文件：
   - 在`src/components`目录下创建新组件，例如`MyComponent.tsx`：

// MyComponent.tsx
import React from 'react';

interface Props {}

const MyComponent: React.FC<Props> = ({}) => {
return <div>Hello, Vite + React + TS!</div>;
};

export default MyComponent;

5. 导入和使用组件：
   - 在其他地方导入并使用刚创建的组件：

// components/App.tsx
import React from 'react';
import MyComponent from '@/components/MyComponent';

function App() {
return (
<div>
<MyComponent />
</div>
);
}

export default App;

6. 开发和测试：
   - 运行项目：`npm run dev` (如果使用的是`npm`)或`pnpm run dev`（如果使用`pnpm`）
   - 在浏览器中查看组件是否正常工作。