Блог

Главная - Вопросы по программированию - Как зарегистрировать глобальные компоненты Vue в Storybook?

Как зарегистрировать глобальные компоненты Vue в Storybook?

#javascript #vue.js #vue-component #storybook

#javascript #vue.js #vue-компонент #сборник рассказов

Вопрос:

Есть ли способ зарегистрировать глобальные компоненты Vue в Storybook, чтобы он был совместим с глобально зарегистрированными компонентами Vue в Vue-CLI?

Ответ №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 приложения.

Комментарии:

1. спасибо, спасибо, спасибо! документирована ли где-нибудь технология Vue 3?

2. Я считаю, что это нигде не задокументировано. В документации упоминается только что-то о глобальном коде. Я думаю, что нашел решение, просмотрев их исходный код .

3. снимаю шляпу перед вами, сэр. я мог бы продолжить и отправить PR на их GitHub, чтобы добавить этот небольшой фрагмент, если вы не возражаете?

Ответ №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-маршрутизатором решается этим

Метки: