Storybook Vue 教程

Storybook 在开发模式下与你的应用并行运行。它帮助你构建与应用业务逻辑和上下文隔离的 UI 组件。这版 Storybook 简介教程适用于 Vue；其他版本适用于 React, React Native, Angular, Svelte。

设置 Vue Storybook

我们需要执行几个步骤来在我们的环境中设置构建过程。首先，我们希望使用 degit 来设置我们的构建系统。使用此包，你可以下载“模板”（部分构建的应用，包含一些默认配置），以帮助你快速推进开发流程。

让我们运行以下命令

# Clone the template
npx degit chromaui/intro-storybook-vue-template taskbox

cd taskbox

# Install dependencies
yarn

现在我们可以快速检查我们应用程序的各个环境是否正常工作

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 5173:
yarn dev

我们主要的前端应用模式：组件开发 (Storybook) 和应用本身。

根据你正在处理的应用部分，你可能希望同时运行其中一个或多个。由于我们目前的重点是创建一个独立的 UI 组件，我们将继续运行 Storybook。

提交更改

在此阶段，将文件添加到本地仓库是安全的。运行以下命令来初始化本地仓库，添加并提交我们目前所做的更改。

git init

接着是

git add .

然后

git commit -m "first commit"

最后

git branch -M main

让我们开始构建我们的第一个组件！