storybook脚手架:https://github.com/zw1371/storybook-cli

最近在研究业务型组件的使用,因为在单独开发组件的时候需要调试,所以为每一个组件都编写一个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热更新的帮助

storybook构建vue组件的更多相关文章

  1. 仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题

    最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来 ...

  2. webpack单独构建scss文件与.vue组件里构建scss的一个坑

    在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...

  3. 手把手教你如何构建Vue前端组件库

    在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...

  4. 基于Vue简易封装的快速构建Echarts组件 -- fx67llQuickEcharts

    fx67llQuickEcharts A tool to help you use Echarts quickly! npm 组件说明 这本来是一个测试如何发布Vue组件至npm库的测试项目 做完之后 ...

  5. vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

    如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...

  6. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  7. webpack构建vue单文件组件

    1.安装vue-loader和vue-template-compiler npm i vue-loader vue-template-compiler --save-dev 2.配置webpack.c ...

  8. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  9. webpack构建vue项目(再谈配置)

    webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...

随机推荐

  1. PHP----------一群猴子排成一圈,按1,2,...,n依次编号。

    1.一群猴子排成一圈,按1,2,...,n依次编号.然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数,再数到第m只,在把它踢出去...,如此不停的进行下去, 直到最后只剩下一只猴子为止,那 ...

  2. Centos7 Lnmp的环境搭建

    centos  版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 关闭防火墙 sy ...

  3. python练习--利用while循环和if语句,完成猜骰子的数字大小

    #exampleimport random# 骰子投掷的随机叔numnum = random.randint(1,6)# 输入一个猜测的数字temp = input("请输入一个整数:&qu ...

  4. Color Schema 配色随笔

    附pdf文件: ColorSchema.pdf

  5. 2017.11.19 C语言基础及流水灯实现

    /* 从右往左*/ #include <reg52.h> sbit ADDR0 = P1^0; sbit ADDR1 = P1^1; sbit ADDR2 = P1^2; sbit ADD ...

  6. 转载 usb_alloc_coherent 和 usb_free_coherent

    今天做移植的时候,随手记录一下,今天所遇到的问题解决方法. 在linux2.6.34和之前的代码中还可以使用usb_buffer_alloc 和 usb_buffer_free 这两个函数,在2.6. ...

  7. 无法加载协定为“NM3.IClrService”的终结点配置部分,因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分

    <binding name="NetTcpBinding_IClrService1" receiveTimeout="00:10:00" sendTime ...

  8. jquery的cookie插件

    一.JS文件 /*! * jQuery Cookie Plugin v1.4.1 * https://github.com/carhartl/jquery-cookie * * Copyright 2 ...

  9. Java的流

    Java中的流主要是用来读写文件的.只要明确你是读文件还是写文件就可以确定使用哪种流了.读:read   写:writer 1.读文件:filereader这个类,顾名思义就知道是读文件了. 2.写文 ...

  10. Vue 组件&组件之间的通信 之 单向数据流

    单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...