vite/storybook/rollup搭建一个自己的组件库

构建测试项目

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