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

一、简介

　　Storybook是一款开源的组件开发工具，它可以运行在主程序之外，因此开发者可以用它来独立开发UI组件，或者用它来快速构建ui组件文档。

　　目前Storybook支持的框架有：

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

　　

　　可以看到，Storybook的功能是相当丰富的。本文将以Vue为例，从零开始搭建一个自己的Storybook。

二、安装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>