构建测试项目
首先vite 初始化一个项目
vue create story-book-demo ## 或者 vue create story-book-demo
然后添加storybook ,具体参看官网：https://storybook.js.org/docs/vue/get-started/install
npx storybook init
这个时候就可以跑项目了
初始化做了什么？
虽然项目运行起来了，不过突然自动创建了一堆未知的文件，也让人心里没底，来看看项目初始化做了哪些事情吧。
-
安装所需的依赖包：因为识别到当前目录下是一个 Angular 项目，所以安装的是 Angular 版本的 Storybook 依赖包。
-
"@storybook/addon-actions": 用以记录事件触发的插件。
-
"@storybook/addon-essentials": 官方维护的插件集合，带有默认配置。
-
"@storybook/addon-links": 用以给组件 story 创建链接。
-
"@storybook/vue3": storybook 针对 vue框架。
-
“@storybook/builder-webpack5”：针对webpack 构建
-
设置 npm 脚本：
-
"storybook": 本地运行 Storybook
-
"build-storybook": 编译打包 Storybook 项目
-
在项目根目录创建 .storybook 文件夹，添加默认配置：
-
main.js：项目的全局配置文件，定义了 story 的查找路径，以及引入的插件。
-
preview.js：项目的渲染配置，包括全局样式的引入，通用性的变量等。
-
tsconfig.json：自动识别项目采用 typescript 后自动生成的配置文件
-
在 src/stories 目录下创建三个组件（button、header、page），以及它们的 story 示例
文件说明
main.js
module.exports = {
"stories": [ // 组件Stories目录所在 —— Storybook会载入配置路径下的指定文件渲染展示
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [ // Storybook所用插件 —— Storybook功能增强
"@storybook/addon-links",
"@storybook/addon-essentials"
],
"framework": "@storybook/vue3" // Storybook所用框架 —— Vue环境支持
}
该文件定义StoryBook与编译相关的配置。
preview.js
// .storybook/preview.js
import elementPlus from 'element-plus';
import { app } from '@storybook/vue3'
app.use(elementPlus);
export const decorators = [
(story) => ({
components: { story, elementPlus },
template: '<elementPlus><story/></elementPlus>'
})
];
import "element-plus/lib/theme-chalk/index.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
}
}
该文件引入全局依赖，定义StoryBook渲染相关的配置。
配置按需加载后，import elementPlus from 'element-plus';导入elementPlus报错：elementPlus is not defined —— 全局加载、按需加载不能在同一项目中使用。
按需加载
在需要使用ElementPlus的Stories中直接引入即可：
// SubmitForm.stories.ts
import { ElButton } from 'element-plus';
import SubmitForm from "./index";
import { SchemaType, RuleTrigger } from "./src/schemas/baseSchema";
const caseSchema = [
{
key: "moduleName",
name: "title",
type: SchemaType.Text,
label: "栏目名称",
placeholder: "请输入栏目名称",
attrs: {
//
},
rules: [
{
required: true,
message: "栏目名称必填~",
trigger: RuleTrigger.Blur,
},
],
},
...
];
export default {
title: "ui组件/SubmitForm",
component: SubmitForm,
};
const Template = (args: any) => ({
components: { SubmitForm, ElButton },
setup() {
return {
...args,
};
},
template: '<submit-form :schema="schema" ref="submitFormRef"></submit-form><el-button @click="submit">提交</el-button>',
});
export const 基本应用 = Template.bind({});
(基本应用 as any).args = {
schema: caseSchema,
};
拓展项目
因为项目是用sass，所以需要增加
yarn add -D @storybook/preset-scss css-loader@5.2.6 sass sass-loader@10.1.1 style-loader@2.0.0
如果是vue-cli，只需
yarn add -D @storybook/preset-scss sass sass-loader css-loader style-loader
在项目 .storybook/main.cjs，增加"@storybook/preset-scss", "@storybook/addon-postcss", 《写vue3+ jsx+ts语法+ storybook展示的组件库》
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/preset-scss",
"@storybook/addon-postcss",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
"framework": "@storybook/vue3",
"core": {
"builder": "@storybook/builder-vite"
},
"features": {
"storyStoreV7": true
}
}
当然还可以安装更多的插件，详情《storybook插件说明： integrations与addons推荐》
转载本站文章《 vite/storybook/rollup搭建一个自己的组件库》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8892.html
