• home > webfront > ECMAS > storybook >

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

    Author:zhoulujun Date:

    storybook入门手册,手把手教你构建一个项目来尝鲜storybook

    构建测试项目

    首先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/**/*[email protected](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 [email protected] sass [email protected] [email protected]

    如果是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/**/*[email protected](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