storybook是什么？
react開發(fā)者可能對(duì)這個(gè)比較熟悉了钠惩，即使用storybook的方式創(chuàng)建react組件柒凉，并且立即可測(cè).這使組件的性能以及可用性得到了測(cè)試保障。
而對(duì)于vue開發(fā)者篓跛，傳統(tǒng)的開發(fā)方式是 (前端開發(fā)/后端開發(fā))–聯(lián)調(diào)–測(cè)試膝捞。
其中測(cè)試包括了白盒測(cè)試、黑盒測(cè)試愧沟。其中黑盒測(cè)試常常就是測(cè)試功能的可能性蔬咬，效率比較低下，且組件可擴(kuò)展性通常無法保障沐寺，一旦有一些功能性改動(dòng)林艘，可能就涉及了源碼修改，俗稱迭代芽丹。
storybook可能在一定程度上避免這里北启，讓組件更加組件化。
這里寫圖片描述
storybook for vue 使用方法
step1. 安裝所需依賴包
npm i --save-dev @storybook/vue
npm i --save vue
npm i --save-dev babel-core
step2. package.json添加啟動(dòng)參數(shù)
{
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook"
}
}
step3. 創(chuàng)建配置文件 XXX-project-Root/.storybook/config.js （注意配置文件名稱固定）
import { configure } from '@storybook/vue'
const req = require.context('../src/stories', true, /.stories.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename));
}
configure(loadStories, module)
step4. 開始創(chuàng)建自己的storybook組件并且引入，文件位置位于 XXX-project-Root/src/stories/index.stories.js
/* eslint-disable react/react-in-jsx-scope */
import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import routes from '../router';
import store from '../vuex/store';
// 第一步咕村，引入組件
import MyButton from './MyButton.vue';
import Welcome from './Welcome.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
mode: 'hash',
routes
});
new Vue({
router,
store
})
// 第二步场钉，注冊(cè)組件.
const install = function(config = {}) {
if (install.installed) return;
Vue.component(Header.name, Header);
// Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
// Vue.$toast = Vue.prototype.$toast = Toast;
// Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
if (typeof window !== 'undefined') {
install();
};
/* eslint-enable react/react-in-jsx-scope */
// 示例組件
storiesOf('Welcome', module).add('to Storybook', () => ({
components: { Welcome },
template: '<welcome :showApp="action" />',
methods: { action: linkTo('Button') }
}));
// 自定義組件
storiesOf('Header ', module).add('Vue common components', () => ({
components: { Header },
render() {
return <ta-header title="測(cè)試標(biāo)題" back fixed />;
},
methods: { action: linkTo('home') }
}));
啟動(dòng)storybook后，vue組件使用別名@方式引入懈涛，報(bào)錯(cuò)無法被解析
解決辦法: 新增一個(gè)配置文件 XXX-project-Root/.storybook/webpack.config.js
const path = require('path');
// load the default config generator.
const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');
module.exports = (baseConfig, env) => {
const config = genDefaultConfig(baseConfig, env);
// Extend it as you need.
function resolve(dir) {
return path.join(__dirname, '..', dir);
}
config.resolve = {
extensions: ['.js', '.vue', '.json','.jsx'],
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src')
}
};
return config;
};
