The official documentation

Storybook.js.org/docs/vue/ge…

A, install,

Storybook relies on some of the scaffolding’s default configurations, so create the project with VUe-CLI and install it automatically with the following command.

npx -p @storybook/cli sb init --type vue
Copy the code

Post installation project directory

The project has two additional folders: StoryBook and Stories

│ ├─ ├─ main.js │ ├─.js │ ├─ main.js │ ├─.js │ ├ ─ ├ ─ sci-press // webpack, ├ ─ sci-press //Copy the code

Start the project

npm run storybook
Copy the code

Packaging project

npm run build-storybook
Copy the code

2. Configure components to support less

If the component uses less, additional configuration is required; otherwise, an error will be reported.

Configuration file.storybook/main.js

Add the webpackFinal attribute

 "webpackFinal": async (config, {
    configType
  }) => {
    config.module.rules.push({
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'],
    });

    return config;
  },
Copy the code

3. Configure the theme

Custom title instead of default storyBook copywriting

Create a new file. Storybook /myTheme.js

import {
  create
} from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'Olympic 2021',
  // brandUrl: 'https://example.com',
  // brandImage: 'https://place-hold.it/350x150',
});
Copy the code

Create a new file. Storybook /manager.js

import {
  addons
} from '@storybook/addons';
import myTheme from './myTheme.js'

addons.setConfig({
  theme: myTheme,
});
Copy the code

4. Left grouping and Chinese display

Each component defines a corresponding xxx.stories.js file under Stories.

Using the default Demo button example, you can change the group name and the Chinese name of the list on the left.

5. Custom Canvas displays the outer style

When a component is displayed, it may be necessary to add decorators to the outer parent element and some specific styles. In the case of button, add a background display

Export default {title: 'Example /Button Button ', Component: MyButton, argTypes: {backgroundColor: {control: 'color' }, size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }, }, decorators: [() => ({ template: '<div style="overflow:hidden;background:red;height: 200px"><story /></div>' })], };Copy the code

Introduce default styles when presenting components

Import style files directly in the xxx.stories.js header

import '.. /style/tableDemo.css'Copy the code

Customizing markdown documents

The use of plug-in

  1. NPM install @ storybook/addon – notes

  2. Add configuration to main.js under.storybook

  1. Configure the markdown file in the xxx.stores. Js file of the corresponding component and add parameters configuration
import tableItem from '.. /components/table.vue'; import {tableDataDefault} from '.. /datas/tableMockData.js' import '.. /style/ tabledemo. CSS '// import markdown file import table ereadme from '.. /.. /docs/ tablereadme. md' export default {title: 'base component /table', Component: tableItem, // Configure markdown file parameters: {notes: tableReadme, }, }; const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { tableItem }, template: '<table-item class="table_demo" v-bind="$props" />', }); console.log(tableDataDefault) export const Primary = Template.bind({}); Primary.args = tableDataDefault;Copy the code