storybook：组件展示、手动测试组件

1、框架作用

a、展示组件UI、手动测试组件；

b、配合插件使用扩展功能（例如生成组件使用文档等等） 插件列表地址： https://github.com/storybookjs/storybook/#addons ；

3、该框架特别适合测试组件库，用于展示组件功能和组件文档。

2、如何使用框架

2.1 使用默认cli框架：

npx -p @storybook/cli sb init --type vue

默认安装2个插件：

addon-links

addon-essentials：这个插件是一个插件组合，包含这7个插件：  https://storybook.js.org/addons/tag/essentials/

生成了如下文件：

.storybook: 配置文件

src/stories: 示例demo

2.2 定制化安装：

cnpm install @storybook/vue

安装相关依赖

npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

安装插件：这里以addon-docs 为例

npm install -D @storybook/addon-docs

在main.js中配置：

module.exports = {

  stories:  ['../src/components/**/*.stories.js'],

  addons: ['@storybook/addon-docs']

}

说明：

遇见的问题： storybook 部分版本有问题，如果手动搭建storybook可能会遇见各种问题。遇见包问题可以考虑升级storybook版本

2.3 配置

项目根路径下生成一个.storybook文件夹，文件夹里有配置文件为main.js，内容如下：

module.exports = {

  stories: ['../stories/**/*.stories.js'], // story路径

 addons: [] // 使用的插件

};

 

3、vue 自动化组件测试

我的另一篇博客里写了关于“vue 自动化组件测试”：https://blog.csdn.net/buler_sky/article/details/115766588，可以配合story一起测试组件。