Ember 的 Storybook 教程
在您的开发环境中设置 Storybook
此社区翻译尚未更新到最新版本的 Storybook。通过将英文指南中的更改应用到此翻译，帮助我们更新它。 欢迎拉取请求.
Storybook 在开发模式下与您的应用程序并行运行。它可以帮助您构建 UI 组件，这些组件与应用程序的业务逻辑和上下文隔离。本版 Storybook 简介教程适用于 Ember；其他版本适用于 React、React Native、Vue、Angular 和 Svelte。
设置 Ember Storybook
我们需要遵循一些步骤来设置构建过程。首先，我们要使用 degit 来设置构建系统。使用此包，您可以下载“模板”（包含一些默认配置的部分构建的应用程序），以帮助您快速跟踪开发工作流程。
让我们运行以下命令
# Clone the template
npx degit chromaui/intro-storybook-ember-template taskbox
cd taskbox
# Install dependencies
yarn
💡 此模板包含此版本教程所需的样式、资产和基本配置。
值得一提的是，您可能会在安装过程中遇到以下消息
ember generate entity-name 命令要求指定实体名称。有关更多详细信息，请使用 ember help。
这只是一个与 @storybook/ember-cli-storybook 包相关的警告。一切都已正确设置。
现在我们可以快速检查应用程序的各个环境是否正常工作
# Run the test runner (Qunit) in a terminal:
ember test --server
# Run the frontend app proper on port 4200:
yarn run start
# Start the component explorer on port 6006:
yarn run storybook-dev
我们的三个前端应用程序模式：自动化测试 (Qunit)、组件开发 (Storybook) 和应用程序本身。
根据您正在处理的应用程序的哪一部分，您可能希望同时运行其中一个或多个。由于我们目前的目标是创建一个 UI 组件，因此我们将坚持运行 Storybook。
提交更改
在此阶段，可以将我们的文件添加到本地存储库中。运行以下命令来初始化本地存储库，添加并提交我们到目前为止所做的更改。
git init
然后
git add .
然后
git commit -m "first commit"
最后
git branch -M main
让我们开始构建我们的第一个组件！