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

下載