构建测试项目

首先vite 初始化一个项目

vue create story-book-demo
## 或者 vue create story-book-demo

然后添加storybook ,具体参看官网：Install Storybook

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: ''})
];
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: '提交',
});
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搭建一个自己的组件库》,
请注明出处：vite/storybook/rollup搭建一个自己的组件库 - Storybook Driven Development学习笔记—组件化之后之组件管理 - 周陆军的个人网站