在前端开发中，Storybook是一个非常强大的工具，它可以帮助我们快速开发、设计、测试我们的组件。而 @storybook/vue 是 Storybook 的一个Vue版本，让我们可以在Vue项目中快速使用 Storybook。本文将详细介绍 @storybook/vue 的使用方法。
安装 @storybook/vue
首先，打开终端并进入您的 Vue 项目根目录中。使用 npm 安装 @storybook/vue 包：
npm install --save-dev @storybook/vue
配置 Storybook
在根目录中创建一个文件夹 storybook，在文件夹中创建一个 config.js 文件和一个 stories 文件夹。这些文件和文件夹组成了 Storybook 的配置文件，让我们可以自由地配置我们的组件。
在 config.js 中写入以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ----------------- ----- --- - ------------------------------------ ----- ------------------ -------- ------------- - --------------------------- -- --------------- - ---------------------- --------
这里，我们在 src/components 目录下创建了一个 stories.js 文件。这个文件包含了我们的组件使用案例，即 stories。然后在 config.js 中，我们使用 require.context() 来载入 stories.js 文件。
然后，在stories文件夹中创建 Button.stories.js 文件，再写入以下代码：
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------------------- -------
---------- ------ -- -- --
--------- -------- ---------------------- -----------------
-------- - -------- -- -- - --------------------- - --
---
---------- ------- -- -- --
--------- -
------- ---------------------- ---------- -------------- -------- -- -- ------------------
--
-------- - -------- -- -- - --------------------- - --
----这里，我们在 stories.js 中导入了storiesOf 方法，用于创建 stories。我们创建了一个 Button 组件，为组件添加了两个 stories。
运行 Storybook
配置好 Storybook 后，我们可以使用以下命令来启动本地服务并运行 @storybook/vue：
npm run storybook
当终端打印出 Storybook started on => http://localhost:6006/，我们就可以通过浏览器访问 http://localhost:6006/ 来访问我们的 Storybook 了。
Storybook 界面介绍
在运行起来的 Storybook 页面中，左侧导航栏展示了所有 stories 的列表，可以快速查看和浏览组件。右侧则展示了 stories 案例的具体展示，还可以进行交互和事件监听。
疑难解答
为什么我的样式不起作用？
你需要将你的样式文件导入在你的 stories.js 中，才可令其生效。举例来说：
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------ -------- ---- ------------------
------ --------------------
------------------- -------
---------- ------ -- -- --
----------- - -------- --
--------- ----------- ----------------- --------------------
----总结
到此，我们已经完成了使用 @storybook/vue 来进行 Vue 组件开发的教程。@storybook/vue 是一个强大的工具，可以帮助我们快速开发和设计我们的组件，添加测试案例，提高我们的编程效率。如果您还未有尝试过 Storybook，那么现在就可以开始使用了！
示例代码
config.js
-- -------------------- ---- ------- ------ - --------- - ---- ----------------- ----- --- - ------------------------------------ ----- ------------------ -------- ------------- - --------------------------- -- --------------- - ---------------------- --------
Button.stories.js
-- -------------------- ---- -------
------ - --------- - ---- -----------------
------------------- -------
---------- ------ -- -- --
--------- -------- ---------------------- -----------------
-------- - -------- -- -- - --------------------- - --
---
---------- ------- -- -- --
--------- -
------- ---------------------- ---------- -------------- -------- -- -- ------------------
--
-------- - -------- -- -- - --------------------- - --
----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb594b5cbfe1ea0611458