Всем привет, подскажите пожалуйста как сделать так, что бы мой Vue компонент был доступен во всех шаблонах Vue, но при этом его не нужно было каждый раз его импортировать?
Использую Vue фреймворк Quasar
.
1 ответ
Есть два варианта.
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.
-
1
-
Пока не пробовал данный плагин. Работает ли он так, что делает ссылку, и потом когда время приходит - он только тогда его загружает, или он делает загрузку при старте приложения? 22 окт 2020 в 8:18
-
-
Значит, с ассинхронностью такое не получится, если есть желание разбить проект на части, что бы это не был большой бандл? 22 окт 2020 в 16:06
-
Судя по твоим комментариям ты ищешь готовые решения. Программист это тот, кто может сам находить решения. Мои ответы эта не панацея на все случаи жизни. Это идея, а развитие уже лежит на каждом программисте. Как раз об этом я и учу в Школе разработчика 22 окт 2020 в 17:31
Vue.component()