Блог

Когда мы начинали с Vue, мы создали все наши компоненты в виде библиотек и включили Vue runtime в HTML head, а по всему телу был установлен глупый корневой экземпляр, так что мы могли просто использовать наши пользовательские теги везде, где хотели. Чтобы оптимизировать процесс сборки и общую очистку кода, я теперь хотел изменить это на сборку приложения, которая используется по умолчанию для VueCLI. Проблема в том, что у нас есть два больших сторонних компонента: VueGoodTable и tiptap (RTE), последний с некоторой настройкой. Итак, чтобы уменьшить долю поставщика, я хотел сохранить эти две отдельные библиотеки, поскольку они не везде нужны.

Теперь проблема в том, что этим библиотекам нужен глобальный Vue, чтобы они могли регистрироваться также глобально. Для VGT у нас есть небольшая оболочка (также потому, что мы используем TypeScript):

 import Vue from 'vue';
import 'vue-good-table/dist/vue-good-table.css';
import '@/assets/vue-good-table-custom.css';
const VueGoodTable: any = {
    'vue-good-table': require('vue-good-table').VueGoodTable,
};
Vue.component('VueGoodTable', VueGoodTable);
  

У нас также есть несколько глобальных фильтров, поэтому я подумал, что могу просто выставить Vue и там:

 import Vue from 'vue';
import dayjs from 'dayjs';

import './assets/global.css';

Vue.filter('formatDate', (dateStr: string) => {
    if (dateStr) {
        return dayjs(dateStr).format('DD.MM.YYYY HH:mm');
    }
});
Vue.filter('displayUser', (userObj: any) => {
    if (userObj) {
        if (userObj.firstName amp;amp; userObj.lastName) {
            return userObj.firstName   ' '   userObj.lastName;
        }
        return userObj.email;
    }
});

window.Vue = Vue;
  

По какой-то причине это работает на одной странице, но не на других; Cannot read property 'component' of undefined где мы делаем это: Vue.component('VueGoodTable', VueGoodTable);

Два вопроса:

1. Это правильный способ представить Vue глобально?
2. Есть ли способ исключить Vue из сборки приложения, как это делается для сборок библиотеки? Я нашел возможность включить Vue в сборку библиотеки, но не наоборот.

Любые другие предложения о том, как справиться с этим, также приветствуются.

РЕДАКТИРОВАТЬ: я выяснил, почему это не работало, vue.config.js для одной рабочей страницы все было по-другому. Но я оставлю вопрос открытым, поскольку хотел бы знать «лучшие» способы справиться с этим.

Похоже, что предоставление ваших библиотек в качестве плагина для Vue может подойти. Таким образом, вам не нужен глобальный экземпляр Vue, но вместо этого экземпляр Vue передается в библиотеку при ее установке.

https://v2.vuejs.org/v2/guide/plugins.html#Writing-a-Plugin