Vue 集成 storybook

一、storybook 介绍

storybook是一个开源的组件管理、文档UI展示工具，用来在大型的项目中，让团队成员一个可以知道到团队已开发的组件，避免编写重复的组件，减少团队沟通时间和开发成本

二、storybook 环境搭建

1. 依赖安装

npm install @storybook/vue --save-dev
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-de

2.入口配置

在项目根目录新建 .storybook/config.js 文件##.storybook/config.js#

import { configure } from '@storybook/vue'
// 加载所有的组件故事
configure(require.context('./stories', true, /\.js$/), module)

3.自定义wepback配置

在项目根目录新建 .storybook/webpack.config.js 文件  

// 在这里你可以重写storybook 默认的webpack配置
module.exports = async ({ config, mode }) => {// `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'/