官方文档
https://storybook.js.org/docs/vue/get-started/introduction
一、安装
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: '<div style="overflow:hidden;background:red;height: 200px"><story /></div>'
})],
};
六、给组件展示时引入默认样式
直接在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: '<table-item class="table_demo" v-bind="$props" />',
});
console.log(tableDataDefault)
export const Primary = Template.bind({});
Primary.args = tableDataDefault;
image.jpeg
