安装vue脚手架：
Node.js>=8.9
没有vue-cli3的先安装一下：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完后查看版本：
vue --version
创建项目：
vue create storybook-test
选择相对应的配置，
等待项目创建完毕。
安装storybook，并初始化
cd storybook-test
npx -p @storybook/cli sb init
如果没检测到使用的是vue，可以尝试注明类型：
npx -p @storybook/cli sb init --type vue
或者自行添加：
教程链接https://storybook.js.org/docs/guides/guide-vue/
添加storybook，书写stories
为了清除了解storybook对项目进行了哪些改造，这里用手动添加的方法。
-
添加依赖
npm install @storybook/vue --save-dev -
添加npm脚本
{ "scripts": { "storybook": "start-storybook" } } -
添加配置文件
.storybook/config.js
import { addParameters,configure } from '@storybook/vue'; function loadStories() { /*根据特定的文件名加载stories，在这个例子，用xxx.stories.js命名文件*/ const req = require.context('../src', true, /\.stories\.js$/); req.keys().forEach(filename => req(filename)); } addParameters({ options: { panelPosition: 'right' //操作面板在右边 }, }) configure(loadStories, module); -
添加必须的webpack配置
.storybook/webpack.config.js
const path = require('path'); // Export a function. Accept the base config as the only param. module.exports = async ({ config, mode }) => { // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. // 'PRODUCTION' is used when building the static version of storybook. // Make whatever fine-grained changes you need config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../'), }); Object.assign(config.resolve.alias,{ '@': path.resolve(__dirname, '../src'), '@assets': path.resolve(__dirname, '../src/assets/') }) // Return the altered config return config; };因为我使用了Sass和alias，在提供给storybook的webpack配置文件上加上相应的内容
-
添加我们的组件
src/components/Button.vue
<template> <button :class="type" class="btn"> <slot></slot> </button> </template> <script> export default { name: "HelloWorld", props: { type: { type: String, default: "default" // default/primary/danger } } }; </script> <style scoped lang="scss"> .btn { border: 1px solid transparent; background: #fff; outline: none; color: #333; padding: 5px 10px; } .default { border: 1px solid #e3e3e3; color: #333; background-color: #fff; } .primary { border: 1px solid #007cff; color: #fff; background-color: #007cff; } .danger { border: 1px solid #cb191d; color: #fff; background-color: #cb191d; } </style> -
为组件添加story
/src/components/Button.stories.js
import Vue from 'vue'; import { storiesOf } from '@storybook/vue'; import vButton from './Button.vue'; storiesOf('GoodsCategory', module) .add('default', () => ({ components: { vButton }, template: '<v-button>default</v-button>', })) .add('primary', () => ({ components: { vButton }, template: '<v-button type="primary">primary</v-button>', })) .add('danger', () => ({ components: { vButton }, template: '<v-button type="danger">danger</v-button>', })); -
运行storybook
npm run storybook等待项目启动，自动打开默认浏览器。
即可看到Botton组件的story
除了添加组件的story外，Storybook官方或社区提供了不少有趣的插件
例如这个能够利用控件更改story的插件@storybook/addon-knobs
-
install 插件
npm install @storybook/addon-knobs --save-dev -
添加注册文件
新建文件.storybook/addons.js，并写入内容
import '@storybook/addon-knobs/register';
-
修改Button.stories.js
import Vue from 'vue'; import { storiesOf } from '@storybook/vue'; import vButton from './Button.vue'; import { withKnobs, number, object, boolean, text, select, date, array, color } from '@storybook/addon-knobs'; storiesOf('vButton', module) .addDecorator(withKnobs) .add('default', () => ({ components: { vButton }, template: '<v-button>default</v-button>', })) .add('primary', () => ({ components: { vButton }, template: '<v-button type="primary">primary</v-button>', })) .add('danger', () => ({ components: { vButton }, template: '<v-button type="danger">danger</v-button>', })) .add('diy', () => { const btnText = text('btnText', 'DIY Button'); //文字控件 const bold = boolean('Bold', false) //启用控件 const selectedBgColor = color('bgColor', '#fff');//颜色选择器 const selectedColor = color('Color', 'black'); const fontSize = number('fontSize', 20)//数字 const customStyle = object('Style', { fontFamily: 'Arial', padding: "20px", }); const style = { ...customStyle, fontWeight: bold ? 800 : 400, fontSize: fontSize + 'px', color: selectedColor, backgroundColor: selectedBgColor }; return { components: { vButton }, props: { btnText: { default: btnText }, style: { default: style } }, template: '<v-button :style="style">{{btnText}}</v-button>' } })要注意的是，在调用add函数添加story前，调用了addDecorator添加我们的插件面板。
-
运行并打开对应的story即可看到操作面板
除了addon-knobs，还有非常多有意思的addons，比如Info的提升版本readme.以及一键换背景的backgrounds。还有现成的Material-UI。还有直接显示Jsx源码的Storybook-addon-jsx.以及控制版本显示的storybook-addon-versions，让你直接对比多个版本的区别。一键生成所有截图的Storybook Chrome Screenshot Addon。这些社区的addons都非常实用。感兴趣可以自己增加。
总结内容
1. 首先说一下使用StoryBook的特点：
- 组件驱动开发，由下至上，从底层组件开始一步步构建界面
- 隔离开发环境展示组件，无需运行项目
- 无需关心组件的依赖和要求
2. 在上面的例子，引入StoryBook，我做了下面这几件事：
- install storybook 依赖
- 新建storybook配置文件./storybook/config.js，添加相关配置，加载组件的stories
- 为storybook的组件运行添加对应的webpack配置（./storybook/webpack.config.js）
- 为组件添加story(即xxx.stories.js)
- 运行storybook
若要使用官方或社区的stroybook插件，则还需要：
- install 插件
- 新建.storybook/addons.js，在里面通过import的方式，注册插件
- 根据插件文档的描述，编写使用的代码
4. 对于新页面的开发方式，我所做的改变可能有
旧的：由上至下，即是：页面结构 -> 组件容器 -> ... ->组件容器 -> 组件
新的：组件驱动开发，由下至上进行页面的开发：组件- -> 组件容器 -> ... ->组件容器 -> 页面结构
网友评论