如何在Storybook中注册全局Vue组件？

Question

有没有办法在 Storybook 中注册全局 Vue 组件，以便与 Vue-CLI 中全局注册的 Vue 组件兼容？

Answer 1

您只需在

.storybook/preview.js

文件中添加几行即可。

Vue.js 3

import {app} from '@storybook/vue3';

app.component('router-link', MockRouterLink);

Vue.js 2

import Vue from 'vue';

Vue.component('router-link', MockRouterLink);

但我还没有测试后一个，因为我只将 Storybook 与 Vue.js 3 应用程序一起使用。

Answer 2

您可以在

preview.js

中使用这些行

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
Vue.component('router-link', Vue.component('RouterLink'));

export const decorators = [(story) => ({
    components: {story},
    template: '<story />',
    router: new VueRouter()
})];

我的 vue-router 问题就这样解决了

Answer 3

故事书 7 / Vue 3

对于仍在寻找的人来说，API 自最佳答案以来已经发生了一些变化。

import { setup } from '@storybook/vue3'

setup((app) => {
    app.component(componentName, componentReference);
})