也许你已经尝试使用快速入门向导(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热更新的帮助