使用storybook构建vue前端组件库

1、在指定文件夹初始化storybook项目

 

npx storybook init

2、使用storybook官方推荐脚手架

npx sb init --type vue

3、在package.js可以看到下列命令，执行npm run storybook即可

 4、vue项目本身是支持sass的无需配置，但是storybook需要额外配置。修改.storybook目录下main.js文件，添加webpackFinal段。

const path = require('path');
module.exports = {
  "stories": [
    "../src/components/**/*.stories.mdx",
    "../src/components/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
}

高级版本需使用插件npm install @storybook/preset-scss

5、showCode显示

export const Primary = Template.bind({});
Primary.parameters = {
  docs: {
    source: { code: "<Layout></Layout>" },
  },
};

6、storybooky引入静态文件

1、在.storybook文件夹下创建preview-head.html文件，并引入需要引入的静态文件

<link rel="stylesheet" href="./iconfont.css" />
<script src="./ailabel.js"></script>

2、修改package.json命令行，指定静态文件目录

    "storybook": "start-storybook -p 6006 -s public,src/iconfont,src/libs",
    "build-storybook": "build-storybook -s public,src/iconfont,src/libs"

3、重新启动项目