如何搭建React+vitejs+storybook的开发环境？

1. 首先安装Node.js和npm或yarn。
2. 在命令行中运行以下命令：

   npx create-react-app my-app
   cd my-app
   yarn add --dev @storybook/react
   

3. 针对Vitejs，我们需要手动创建vite.config.js文件来配置。在my-app文件夹下创建vite.config.js文件，填写以下内容：

   import reactRefresh from '@vitejs/plugin-react-refresh';
   
   export default {
     plugins: [reactRefresh()],
   };
   

4. 在package.json文件中添加以下脚本：

   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   }
   

5. 在src/stories文件夹下创建一个Button.stories.js文件来编写storybook示例。示例代码如下：

   import React from 'react';
   import { action } from '@storybook/addon-actions';
   
   import Button from '../components/Button';
   
   export default {
     title: 'Button',
     component: Button,
   };
   
   export const Text = () => (
     <Button onClick={action('clicked')}>Hello Button</Button>
   );
   
   export const Emojis = () => (
     <Button onClick={action('clicked')}>
       <span role="img" aria-label="so cool">
         � � � �
       </span>
     </Button>
   );
   
   

6. 最后，在命令行中运行 yarn storybook 即可启动storybook。要构建生产就运行yarn build-storybook。

那么我们得到了一个React + vitejs + storybook搭建的开发环境，我们可以在storybook中开发我们的组件以及编写示例并与团队共享。