In the previous article, “How to Encapsulate Vue Components for Reuse across projects”, an example of encapsulating a vue.js component library with rollup.js was presented. Limited to space and complexity, the instant debugging preview part of the component, also used rollup configuration together, although fully enough, but a little trouble to run, the bigger feeling is also not satisfactory.

This article attempts to optimize this part of the development experience, using Storybook, an industry-proven solution for unified presentation and factual debugging of components.

Storybook is an open source tool for developing standalone React, Vue, and Angular UI components. Build cool user interfaces efficiently and orderly

Storybook has proved itself well in React and other fields. With the introduction of Storybook, developers can gradually manage various low-coupling reusable components even in ordinary projects. This can be arranged with tools such as Lerna and even directly publishing components to NPM.

Since we picked up where we left off, we won’t go into all the details of Storybook in this article, but we’ll use it to do the same things we’ve done before: compile and debug in real time, test and run manually.

Directly describe the change steps based on the previous project.

First, after introducing Storybook, the project structure will be fine-tuned to look like this:

├─.babelrc ├─.Eslintignore ├─.Eslintrc.js ├─.Gitignore ├─ Jest.config.js Package.json ├─ Postcss.config.js ├─ Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy/Heavy ├ ─ __mocks__ / └ ─ __tests__ /Copy the code

The following two folders can be seen:

├ ─ storybook / ├ ─ storybook - static /Copy the code

Used to store the configuration and generated static preview pages, respectively.

To set up the Storybook environment, install the necessary dependencies:

npm install @storybook/vue --save-dev
npm install vue-loader style-loader css-loader sass-loader node-sass --save-dev
Copy the code

Perform initialization:

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

Two NPM scripts are automatically added:

"scripts": {..."storybook": "start-storybook -p 6006"."build-storybook": "build-storybook"
},
Copy the code

Delete default generated folders:

rm -rf ./stories/
Copy the code

Modify the configuration in.storybook/config.js to place the.stories.js file directly with the corresponding component source code:

const req = require.context('.. /src'.true, /\.stories\.js$/); .Copy the code

Also in the above file, do something similar to the initialization of main.js in the project:

// .storybook/webpack.config.js

import 'normalize.css';
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element); .Copy the code

To properly parse the style part of the Vue single-file component, change the Settings:

// .storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {
  config.module.rules.push({
    test: /\.scss$/.include: path.resolve(__dirname, '.. /src'),
    use: ['style-loader'.'css-loader'.'sass-loader']});return config;
};
Copy the code

Storybook /preview-head.html to introduce the necessary styles, etc. Similar work in the project might be done in index.html, etc. :

<link rel="stylesheet" href="//foo/bar/index.css">
Copy the code

Next comes the hands-on writing of story use cases for various components, such as:

// src\projectA\components\HorizentalRadios.stories.js

import { storiesOf } from '@storybook/vue';
import HorizentalRadios from './HorizentalRadios';

storiesOf('projectA | more than the number into the drop-down raidos'.module)
  .add('When there are fewer lists than expected', () = > ({components: { HorizentalRadios },
    template: `
       ',
    data() {
      return {
        value: 'aaa'.items: [{
          label: 'aaa'.name: 'name1'
        }, {
          label: 'bbb'.name: 'name2'}]}; },methods: {
      valueChange() {
        console.log(this.value);
      },
    },
  }))
  .add('More lists than expected + list theme color', () = > ({components: { HorizentalRadios },
    template: `
       ',
    data() {
      return {
        value: 'aaa'.items: [{
          label: 'aaa'.name: 'name1'
        }, {
          label: 'bbb'.name: 'name2'
        }, {
          label: 'ccc'.name: 'name3'
        }, {
          label: 'ddd'.name: 'name4'
        }, {
          label: 'eee'.name: 'name5'
        }, {
          label: 'fff'.name: 'name6'}]}; },methods: {
      valueChange() {
        console.log(this.value); }}}))Copy the code

As you can see, you can add multiple use cases to the same component, similar to unit testing;

StoriesOf () is similar to the unit test of the describe (), and its first parameter can be used | division, said.

Run NPM Run storybook to see the effect:

Don’t forget NPM Run storybook before finally publishing it, generating static pages that other developers can run and view directly.






–End–






Search fewelife concern public number reprint please indicate the source