Angular 版 Storybook 教程
在你的开发环境中设置 Angular 版 Storybook
Storybook 在开发模式下与你的应用并行运行。它帮助你构建与应用业务逻辑和上下文隔离的 UI 组件。本版 Storybook 入门教程适用于 Angular；其他版本适用于 React、React Native、Vue、Svelte。
设置 Angular 版 Storybook
我们需要遵循一些步骤来在我们的环境中设置构建流程。首先，我们想使用 degit 来设置我们的构建系统。使用这个包，你可以下载“模板”（带有默认配置的部分构建好的应用），以帮助你快速启动你的开发工作流程。
让我们运行以下命令
# Clone the template
npx degit chromaui/intro-storybook-angular-template taskbox
cd taskbox
# Install dependencies
npm install
💡 这个模板包含了本教程版本所需的基本样式、资源和最必要的配置。
现在我们可以快速检查我们应用的不同环境是否正常工作
# Start the component explorer on port 6006:
npm run storybook
# Run the frontend app proper on port 4200:
ng serve
我们的主要前端应用模式：组件开发 (Storybook) 和应用本身。
根据你正在处理的应用部分，你可能希望同时运行其中一个或多个。由于我们目前的重点是创建一个独立的 UI 组件，我们将继续运行 Storybook。
提交更改
在此阶段，将我们的文件添加到本地仓库是安全的。运行以下命令初始化本地仓库，添加并提交到目前为止我们所做的更改。
git init
接着
git add .
然后
git commit -m "first commit"
最后
git branch -M main
让我们开始构建我们的第一个组件！