storybook构建vue组件

最近在研究业务型组件的使用,因为在单独开发组件的时候需要调试，所以为每一个组件都编写一个webpack开发环境,然后上传上去为了其他人可以直接使用又把webpack上传上去,这样会有两个问题:

　　1:每个项目都要弄一个webpack开发环境即使是只需要复制代码

　　2:把开发环境上传上去类似与上传java代码把eclipse上传上去一样，这样感觉不是很合适

后来听到大神同事介绍storybook,所以研究了一下：

官网:https://storybook.js.org/basics/guide-vue/

下面把storybook的vue使用翻译一下:针对vue的故事版介绍


也许你已经尝试使用快速入门向导(quick start guide)来构建你的故事板项目,如果你想手动的(manually)创建故事版,请看下文

这也会帮助你理解故事版的工作原理

开始吧!
故事版自带webpack和开发环境
这个storybook脚手架和vue脚手架非常类似(similar),但是他又允许你配置其他一些可能这个脚手架不满足的东西

在这里,跟随我一起开始vue的storybook故事版构建吧

步骤(Table of contents)
　　Add @storybook/vue
　　Add vue and babel-core
　　Create the NPM script
　　Create the config file
　　Write your stories
　　Run your Storybook

1:Add @storybook/vue
首先,你需要导入@storybook/vue到你的项目中,运行命令:

  npm i --save-dev @storybook/vue

2:Add vue, babel-core, and babel-loader
执行命令:
  npm i --save vue
  npm i --save-dev babel-loader vue-loader vue-template-compiler
  npm i --save-dev @babel/core babel-preset-vue

3:Create the NPM script
将下面的npm脚本添加到你的项目的package.json文件中,为了(in order to)可以执行storybook命令:

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

4:Create the config file

Storybook可以以多种不同的(several different)方式进行配置.这就是为什么我们需要一个配置目录,在上面的脚本中我们添加了一个-c的选项的时候提到(mentioning).storybook,他就是配置目录

下面你要做三件事:

1:引入并注册vue组件,就像你平常那样做的一样,
2:对于vue创建,你同样需要使用vue.use去注册他们
3:引入你的stories

下面是一个例子,关于配置文件.storybook/config.js的:

import { configure } from '@storybook/vue';

import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins

// Import your custom components.
import Mybutton from '../src/stories/Button.vue';

// Install Vue plugins.
Vue.use(Vuex);

// Register custom components.
Vue.component('my-button', Mybutton);

function loadStories() {
  // You can require as many stories as you need.
  require('../src/stories');
}

configure(loadStories, module);

这个例子注册了Button组件，导入了Vuex,然后从../stories/index.js里面loaded你的故事版

所有的组件注册和插件引入必须在configure()方法之前声明好

这个stories文件夹仅仅是一个例子,你可以从任何地方引入你的stories,我们认为stories文件最好尽可能靠近资源文件

5:Write your stories

下面开始写你的stories

现在你可以写一些stories在../stories/index.js文件夹中,就像:

import Vue from 'vue';

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

import MyButton from './Button.vue';

storiesOf('MyButton', module)
  .add('story as a template', () => '<my-button :rounded="true">story as a function template</my-button>')
  .add('story as a component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }));
你可以多次使用storiesOf来创建你的组件,每一个storiesOf都是单独对应一个组件，关于storiesOf的组件使用有两种形态:

story as a template
story as a component

6:Run your Storybook
现在万事俱备,来运行你的项目吧,执行命令:

npm run storybook

现在你对组件的任何修改都会实时更新,这得益于webpack热更新的帮助

storebook demo下载:

下载

storybook构建vue组件

猜你喜欢