1

Всем привет, подскажите пожалуйста как сделать так, что бы мой Vue компонент был доступен во всех шаблонах Vue, но при этом его не нужно было каждый раз его импортировать? Использую Vue фреймворк Quasar.

2
  • Необходимо зарегистрировтаь его через Vue.component() 20 апр 2020 в 6:32
  • Сегодня постараюсь ответить развёрнуто. 20 апр 2020 в 7:45

1 ответ 1

2

Есть два варианта.

1. Зарегистрировать компонент через Vue.component()

Регистрация компонентов таким образом позволяет использовать эти компоненты во всех Vue шаблонах без дополнительной регистрации. Пример кода:

import {LoaderSent} from "shared";
import {SunEditor}  from "shared";

Vue.component("LoaderWait", LoaderWait);
Vue.component("SunEditor", SunEditor);

Что бы в Quasar-Framework этот код отработал в нужное время его необходимо поместить в boot секцию.

2. Сделать автоматический импорт через webpack Provide плагин

Используем webpack Provide плагин.

Этот способ регистрирует в сборщике Webpack компоненты, позволяя не импортировать их каждый раз в каждом файле.

Пример кода в файла quasar.config.js:

build: {
  ...
  extendWebpack(cfg) {
                cfg.plugins.push(
                    new webpack.ProvidePlugin({
                        Vue: ['vue', 'default'],
                        sunImport: ['src/utils/sunImport', 'default'],
                        request: ['src/utils/request', 'default']
                    }));
  }
}

В этом коде мы регистрируем Vue, sunImport и request компоненты.

Примеры кода взяты с проекта GitHub SunEngine / Client.

5
  • 1
    Спасибо! Помогло 20 апр 2020 в 8:10
  • Пока не пробовал данный плагин. Работает ли он так, что делает ссылку, и потом когда время приходит - он только тогда его загружает, или он делает загрузку при старте приложения? 22 окт 2020 в 8:18
  • @Dmitry Это происходит на уровне сборки 22 окт 2020 в 12:07
  • Значит, с ассинхронностью такое не получится, если есть желание разбить проект на части, что бы это не был большой бандл? 22 окт 2020 в 16:06
  • Судя по твоим комментариям ты ищешь готовые решения. Программист это тот, кто может сам находить решения. Мои ответы эта не панацея на все случаи жизни. Это идея, а развитие уже лежит на каждом программисте. Как раз об этом я и учу в Школе разработчика 22 окт 2020 в 17:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.