storybook创建vue组件库文档 storybook创建vue组件库文档

官方文档 https://storybook.js.org/docs/vue/get-started/introduction
一、安装 【storybook创建vue组件库文档】storybook依赖脚手架的一些默认配置，所以先用vue-cli创建项目，然后用下面的命令自动安装。

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

安装后项目目录
项目多出两个文件夹.storybook和stories

├── .storybook// storybook配置相关文件 │├── main.js// 入口文件，配置插件，webpack等 │└── preview.js// 其他配置信息 │ └── src └── stories// 组件story书写的核心位置

启动项目

npm run storybook

打包项目

npm run build-storybook

二、配置组件支持less 组件如果使用less的话，需进行额外配置，否则会报错。
配置文件 .storybook/main.js 增加webpackFinal属性

"webpackFinal": async (config, { configType }) => { config.module.rules.push({ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }); return config; },

三、配置主题自定义标题，替代默认storybook文案

文章图片
配置主题新建文件.storybook/myTheme.js

import { create } from '@storybook/theming'; export default create({ base: 'light', brandTitle: 'Olympic 2021', // brandUrl: 'https://example.com', // brandImage: 'https://place-hold.it/350x150', });

新建文件.storybook/manager.js

import { addons } from '@storybook/addons'; import myTheme from './myTheme.js'addons.setConfig({ theme: myTheme, });

文章图片
标题修改四、左侧分组及中文显示每个组件在stories下定义一个对应的xxx.stories.js的文件。
以默认demo的button举例，可以修改分组名和左侧列表的中文名。

文章图片
button.sotries.js

文章图片
展示效果五、自定义canvas展示外层样式组件展示的时候，可能需要外层父元素和一些特定样式
增加 decorators，以button为例，加背景展示

文章图片
自定义canvas展示外层样式

export default { title: 'Example例子/Button按钮', component: MyButton, argTypes: { backgroundColor: { control: 'color' }, size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, }, decorators: [() => ({ template: '' })], };

六、给组件展示时引入默认样式直接在xxx.stories.js头部import样式文件

import '../style/tableDemo.css'

七、自定义markdown文档使用插件

npm 安装 @storybook/addon-notes
在.storybook下的 main.js增加配置

文章图片
main.js增加配置
对应组件的xxx.stores.js文件中配置markdown文件，增加parameters配置

import tableItem from '../components/table.vue'; import {tableDataDefault} from '../datas/tableMockData.js' import '../style/tableDemo.css' // 引入markdown文件 import tableReadme from '../../docs/tableReadme.md' export default { title: '基础组件/table', component: tableItem, // 配置markdown文件 parameters: { notes: tableReadme, }, }; const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { tableItem }, template: '', }); console.log(tableDataDefault) export const Primary = Template.bind({}); Primary.args = tableDataDefault;