Storybook for vue - 前端ui組件管理神器

1、簡介

　　Storybook是一款開源的組件開發工具，它能夠運行在主程序以外，所以開發者能夠用它來獨立開發UI組件，或者用它來快速構建ui組件文檔。

　　目前Storybook支持的框架有：

• React
• React Native 
• Vue
• Angular
• Marionette.js
• Mithril
• Marko
• HTML
• Svelte
• Riot
• Ember
• Preact
• Rax

　　

　　能夠看到，Storybook的功能是至關豐富的。本文將以Vue爲例，從零開始搭建一個本身的Storybook。

2、安裝Storybook

　　首先本身建立一下文件夾，storybook-demo。

　　官方文檔中給的安裝方式有2種，第一種是自動化安裝，有點相似vue的腳手架，它會自動將環境配置好，開發者無需手動初始化相關配置文件。

npx -p @storybook/cli sb init --type vue

　　第二種是能夠手動進行配置，讀者能夠參照官網的教程來進行安裝。附送地址：https://storybook.js.org/docs/guides/guide-vue/。

 

　　可是筆者通過嘗試，使用官方的方法安裝的時候會缺乏部分依賴致使運行失敗，下面將介紹一下筆者本身使用的安裝方法。

　　首先，安裝vue腳手架，而後初始化項目:

vue create storybook-demo

　　

　　

　　選擇babel和css預處理， 而且在第三部選擇安裝node-sass，這幾項是必須的，其餘可根據須要進行選擇。　　

　　

　　腳手架安裝完成後，刪除無關文件，並在根目錄下新建.storybook、stories文件夾，在.storybook下新建如下文件：addons.js、main.js、config.js、webpack.config.js。完成以後目錄以下：

　　

　　下面再進行storybook的相關安裝。

　　安裝storybook for vue:

npm install @storybook/vue --save-dev

　　在根目錄下找到package.json文件並配置引導：

{ "scripts": { "storybook": "start-storybook" } }

　　固然，你也能夠在後面跟上-p port來設置默認端口號，如：

{ "scripts": { "storybook": "start-storybook -p 6006" } }

　　在根目錄下新建.storybook文件夾，並在裏面新建main.js文件，進行相關配置：

module.exports = {

　　stories: ['../stories/**/*.stories.js', '../stories/*.stories.js']

};

　　這樣系統就會自動解析src目錄下的*.stories.js、*.stories.ts文件了。

　　以後，在根目錄下新建src文件夾，在裏面新建index.stories.js文件並編寫本身的組件：

import Vue from 'vue'; import MyButton from './Button.js'; export default { title: 'Button' }; export const withText = () => '<my-button>with text</my-button>'; export const withEmoji = () => '<my-button>😀 😎 👍 💯</my-button>'; export const asAComponent = () => ({ components: { MyButton }, template: '<my-button :rounded="true">rounded</my-button>' });

　　Button.js（因爲這裏沒有安裝vue文件的解析依賴，因此只能用js文件來進行代替，若是想引入vue來代替js，可自行安裝相關loader）:

export default { name: 'my-button', data() { return { buttonStyles: { border: '1px solid #eee', borderRadius: 3, backgroundColor: '#FFFFFF', cursor: 'pointer', fontSize: 15, padding: '3px 10px', margin: 10, }, }; }, template: ` <button :style="buttonStyles" @click="onClick">
      <slot></slot>
    </button>
 `, methods: { onClick() { console.log('click'); this.$emit('click'); }, }, };

　　這樣，一個簡單的storybook就搭建完成了。在命令行輸入：

npm run storybook

　　就會自動打開剛纔的storybook。

　　

3、storybook的插件 - addons

　　經過上面的搭建能夠看到，咱們本身搭建的storybook與一開始的看到的圖片簡直就是買家秀和賣家秀的區別。這是由於在storybook中，它提供了不少插件供開發者使用，開發者可使用addons給每一個story增長額外的功能，如使用文檔、查看源碼、查看事件等，使每一個story的功能更加豐富。

　　storybook自帶的addons已足夠使用，固然官方也提供了相關api可讓開發者編寫本身的addon，具體實現可移步到官方文檔中進行查看。

　　官方自帶的addons可參考：

　　https://storybook.js.org/addons/

　　https://github.com/storybookjs/storybook/tree/master/addons

　　固然，使用addons以前必須先到https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md查看相關addon是否支持當前框架，好比說info插件就只支持react可是不支持vue，以前筆者還在這裏研究了半天爲何info一直配置失敗。

　　下面介紹幾個筆者本身用過的addon以及配置方法，其餘addon可照貓畫虎，根據官方文檔給的參數進行配置便可。

　　1. story-source - 查看當前story源碼

　　安裝：

npm i @storybook/addon-storysource --save-dev

　　配置：

　　.storybook/main.js

const path = require("path"); module.exports = { stories: ["../stories/**/*.stories.js", "../stories/*.stories.js"], addons: [ { name: "@storybook/addon-storysource", options: { rule: { // test: [/\.stories\.jsx?$/], This is default
          include: [path.resolve(__dirname, "../stories")], // 找到本身存放stories的文件夾
 }, loaderOptions: { prettierConfig: { printWidth: 80, singleQuote: false }, }, }, }, ], };

　　其中，loaderOptions的默認值爲：

{ printWidth: 100, tabWidth: 2, bracketSpacing: true, trailingComma: 'es5', singleQuote: true, }

　　在.storybook/addons.js裏面進行插件註冊：

import '@storybook/addons'; import '@storybook/addon-storysource'

　　到這裏就能夠了，從新運行一下看一下結果：

　　

　　

　　2. readme - 當前組件的文檔說明

　　

　　安裝：

npm install --save-dev storybook-readme

　　註冊：

　　.storybook/addons.js

import 'storybook-readme/register';

　　配置：

　　這裏可分爲全局配置和局部配置，全局配置能夠在.storybook/config.js裏面進行相關配置，局部配置可在制定的*.stories.js文件裏進行配置。區別以下：

　　全局配置需調用如下方法：

import { addDecorator } from '@storybook/vue'; import { addReadme, configureReadme } from 'storybook-readme'; configureReadme({ // ...some code
}); addDecorator(addReadme);

　　局部配置：

import { storiesOf } from "@storybook/vue"; import MyButton from "./MyButton.vue"; import ButtonReadme from "./MyButton.md"; storiesOf("Demo", module) .addParameters({ readme: { codeTheme: "duotone-sea", content: ButtonReadme, sidebar: ButtonReadme, } }) .add("Button", () => { return { components: { MyButton, }, template: `<my-button type="primary">My Button</my-button>`,
 }; });

　　因爲這個addon是沒有官方文檔的，筆者花了好長時間才找到一個開源文檔，可移步到https://github.com/tuchk4/storybook-readme進行參考，裏面也有相關demo能夠查看。

　　稍微解釋一下里面各方法參數的做用：

configureReadme({ /** * Wrapper for story. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */
  // 組件區域的預處理，至關於在組件展現的時候外面套上一層div，組件做爲插槽插入到這個div裏面，在這裏能夠設置div的樣式，若是是使用vue的話能夠以vue組件格式插入，下面同理
 StoryPreview /** * Wrapper for content and sidebar docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */
  // 文檔部分的樣式，即插件裏面的content
  DocPreview/** * Wrapper for header docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ HeaderPreview/** * Wrapper for footer docs. Usually used to set some styles * React: React.ReactNode * Vue: Vue component */ FooterPreview

  /** * Header docs in markdown format */ header: '', /** * Footer docs in markdown format */ footer: '', });

　　

 　　不理解preview的能夠看一下上圖，好比header的內容就爲「用戶交互組件demo」，headerPreview就是下面那層border，若是有將readme註冊到addons.js裏面，在綠色方框裏還會有一個readme選項，能夠查看文檔。

　　在給特定story添加readme的時候，能夠看到能夠添加兩個文檔，如：

storiesOf("Demo", module) .addParameters({ readme: { codeTheme: "duotone-sea", content: ButtonReadme, sidebar: ButtonReadme, } }) .add("Button", () => { return { components: { MyButton, }, template: `<my-button type="primary">My Button</my-button>`,
 }; });

　　其中，這裏可能會有讀者不理解。裏面是content是對應圖中紅色方框的內容，sidebar則是對應綠色方框裏的內容（若是有註冊），codeTheme是md文檔的樣式，可自行設置。

　　這裏還有一個小技巧，就是在編寫content的時候，能夠在文檔中插入如下代碼：

<!-- STORY -->

　　這段代碼能夠控制咱們的組件要在文檔的哪一個部分出現。若是不填寫，則默認會先顯示文檔內容，再顯示組件內容。因此咱們最好在文檔的最前面先添加上述代碼，先將咱們的組件展現出來，再進行文檔編寫。

 

　　這就是筆者目前用過的兩個addon了，其餘addons讀者能夠本身嘗試，可讓本身的storybook更加個性化，功能更加完善。