Storybook操作文档
一、Storybook的安装和配置
-
安装
通过命令 初始化StoryBook环境,storybook自动检测开发环境，安装依赖
$ npx -p @storybook/cli sb init
-
更新目录结构
image
通过 npx sb init 安装storybook添加的目录
├─ .storybook // 预设的配置文件
│ ├─ main.js // 入口文件
│ ├─ preview.js // 控制Stories的呈现、全局资源的加载
├─ stories // 示例模版
│ ├─ Button.stories.js // 控制Stories的呈现、全局资源的加载
│ ├─ Input.stories.js // 控制Stories的呈现、全局资源的加载
-
package.json 添加命令
"scripts": {
"storybook": "start-storybook -p 6006", // 启动本地服务以预览
"build-storybook": "build-storybook" // 构建
},
-
入口配置 .storybook/main.js
storybook的webpack和项目的webpack是完全分离的,要在main.js里配置webpackFinal
const path = require('path')
module.exports = {
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: '@storybook/vue3',
core: {
builder: '@storybook/builder-webpack5'
},
webpackFinal: async config => {
config.resolve.alias['@utils'] = path.resolve(__dirname, '../packages/utils')
config.resolve.extensions.push('.ts', '.tsx')
return config
}
// staticDirs: ["../public"], //静态资源访问
}
-
依赖配置 .storybook/preview.js
该文件引入全局依赖，定义StoryBook渲染相关的配置
因为示例代码中依赖 lucid-theme ，展现的页面没有样式，所以，StoryBook渲染需要额外引入lucid-theme主题
import '@dingdao/lucid-theme/lib/theme-default.css' //<== 引入全局样式
import elementPlus from 'element-plus'; //<== 引入第三方组件库
import { app } from '@storybook/vue3' //<== 导入Storybook提供的Vue支持
app.use(elementPlus); //<== 安装
// 全局装饰器 decorators 装饰器的作用主要是统一修饰组件展示区域的样式，例如：设置居中、margin、padding 的距离等等。包括全局装饰器和组件装饰器
export const decorators = [(story) => ({
components: { story },
template: '<div style="margin: 3em;padding: 3em;text-align:center;"><story /></div>'
})];
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
},
expanded: true, //controls 展示更多字段
}
}
-
全局管理配置 .storybook/manager.js
import { addons } from "@storybook/addons";
import theme from "./themes/theme";
addons.setConfig({
theme: theme
})
-
全局主题配置 .storybook/themes/theme.js
import { create } from '@storybook/theming';
export default create({
base: 'light',
brandTitle: 'Lucid-UI', // logo不展示时，替代文本alt
// brandImage: '/logo.png',
brandImage: 'https://lucent.dev.dingdaoos.com/img/lucid-ui-logo.679258d4.png',
});
二、组件的Stroybook编写
-
创建 *.stories.js
-
引入组件
-
配置左侧菜单
-
配置控制门面板属性(argTypes)
-
配置Template模板
-
配置左侧子菜单
import LuInput from '../packages/components/input'
export default {
title: 'Example/输入框Input',
component: LuInput,
decorators: [() => ({ template: '<div style="margin: 3em;width:240px"><story /></div>' })], //组件装饰器 就是套在组件外层的一个容器, 不需要可以不加.
argTypes: {
modelValue: {
name: 'modelValue', //属性的名称,可以不写,默认是字段名
control: { type: 'text' }, //关联属性的控件类型
defaultValue: '', // Control 字段的默认值
description: '组件的值', //设置属性的描述
required: true, //将属性设置为可选或必需 >>> 没什么用,主要受字段内props字段影响
//控制面板详情表格
table: {
type: {
summary: '[string | number]' //提供该类型的简短版本
// detail: 'something' //提供类型的扩展版本。
},
defaultValue: {
//控制面板默认值字段
summary: '' //提供默认值的简短描述
// detail: 'Something' //提供更长版本的默认值描述。
}
}
},
maxlength: {
name: 'maxlength',
control: { type: 'Number' },
defaultValue: 'text',
description: `原生属性，最大输入长度`,
options: ['text', 'password'],
table: {
type: {
summary: 'Number'
}
}
},
type: {
name: 'type',
control: { type: 'inline-radio' },
defaultValue: 'text',
description: `组件的可选类型 => 'text' | 'password'`,
options: ['text', 'password'],
table: {
type: {
summary: 'string'
},
defaultValue: {
summary: '"text"'
}
}
}
}
}
const Template = args => ({
components: { LuInput },
setup() {
return { args }
},
template: '<lu-input v-bind="args"></lu-input>'
})
export const Primary = Template.bind({})
Primary.storyName = '基础用法'
export const Primary2 = Template.bind({})
Primary2.args = {
type: 'password',
}
Primary2.storyName = '密码框'
export const Primary3 = Template.bind({})
Primary3.args = {
state: 'warning',
}
Primary3.storyName = '提醒状态'
export const Primary4 = Template.bind({})
Primary4.args = {
type: 'text',
state: 'danger',
size: 'oversize'
}
Primary4.storyName = '超大警告'
三、运行部署
命令行执行：
npm run storybook
image
通过build命令 生成静态页面，直接部署静态页面即可
npm run build-storybook
image
四、附录:
-
Props属性
无法复制加载中的内容
-
Controls类型
无法复制加载中的内容
