本文主要是介绍vue2 使用 storybook 6.x，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景说明
在已存在的项目中加入storybook支持, 且该项目是一个组件项目(用于封装独立组件, 供其他项目使用)
storybook版本: 6.x
vue版本: 2.x
引入storybook
项目根目录执行: npx sb init
- 执行完成之后,
package.json中会增加storybook的devDependencies依赖, 且会新增storybook,build-storybook脚本, 用于开发时运行storybook和对storybook打包 src目录下会生成stories文件夹, 里面是自动生成的示例, 可以一定程度上参考这些示例编写组件, 以便生成正确的storybook 文档
运行storybook: npm run storybook
让storybook支持第三方依赖. 如: element-ui
.storybook/preview.js
// 让storybook能够识别第三方依赖. 如: element-ui
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)export const parameters = {actions: { argTypesRegex: '^on[A-Z].*' },controls: {expanded: true, // 该配置为true时, 会为每一个prop生成对应说明(如果有的话, 每个prop的说明应该写在/** xxx */中)matchers: {color: /(background|color)$/i,date: /Date$/}}
}
增加storybook的扫描目录
因为组件写在了packages目录, 对应组件的storybook也写在那里比较好, 因此需要增加扫描目录
.storybook/main.js
module.exports = {stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../packages/**/*.stories.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)'],addons: ['@storybook/addon-links', '@storybook/addon-essentials']
这篇关于vue2 使用 storybook 6.x的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
