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下载:

下载