vite 开发一个 react组件
时间: 2024-10-15 19:18:03 浏览: 8
要使用Vite来开发React组件,可以按照以下步骤操作:
1. **安装依赖**[^1]:
```bash
npm install -D vite @vitejs/plugin-react vite-plugin-react-pages
```
2. **创建Vite配置文件**(`vite.config.js`):
```javascript
import { createVuePlugin } from '@vitejs/plugin-vue';
import { createReactPlugin } from 'vite-plugin-react';
export default {
plugins: [
createVuePlugin(),
createReactPlugin({
// 如果有其他React配置项,如jsxTransform或hydratable
jsxTransform: {
transformJSX: true,
},
}),
],
};
```
3. **创建React组件**:
创建一个名为`MyComponent.vue`的文件,它将包含React组件的源代码:
```jsx
<template>
<div>Hello, Vite with React!</div>
</template>
// 可以在这里编写React组件的逻辑
<script>
export default {
name: "MyComponent",
// 如果有state或其他React特性,这里定义
}
</script>
```
4. **运行开发服务器**:
使用命令行启动Vite:
```bash
vite
```
5. **访问组件**:
当服务器启动后,可以在浏览器的地址栏输入`http://localhost:3000/#/components/MyComponent`,查看你的React组件。
6. **故事模式(demos)开发**[^2]:
如果你想展示组件的不同状态或用例,可以使用`vite-plugin-react-pages`提供的故事模式。这通常在`stories`目录下创建`.mdx`文件,配合`@storybook/react`库实现。
阅读全文