DEV Community
·
使用 Storybook 8 设置 Stencil 4
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了如何设置和运行Stencil与Storybook，包括安装Stencil、导航项目、集成Storybook、更新tsconfig.json、配置Storybook、创建第一个故事及运行项目，最终实现组件更改的实时反映。
🎯
关键要点
- 步骤1：安装Stencil，使用命令npm init stencil。
- 步骤2：导航到项目并安装依赖，使用命令cd <your-project-name>和npm install。
- 步骤3：集成Storybook，使用命令npx sb init --type web_components，并选择Vite。
- 步骤4：更新tsconfig.json中的compilerOptions，设置skipLibCheck为true。
- 步骤5：配置Storybook，修改.storybook/preview.js和.storybook/main.ts文件，添加必要的代码和配置。
- 步骤6：设置第一个故事，删除src/stories，创建my-component.stories.tsx并添加示例代码。
- 最后一步：运行项目，使用npm run build -- --watch和npm run storybook命令，确保项目正常运行并实时反映更改。
➡️
