Как сохранить набор vue-компонентов как библиотеку/плагин?

Question

[Евгений Журов]

Добрый день. Стоит задача использовать микроприложение на vue в виде подключаемого модуля - причем на разных (по природе) ресурсах. Например, чтобы можно было подключить хоть в spa на основе vue-cli, хоть в wordpress (в виде embed-кода, например, но тогда надо чтобы подтягивался и сам vue с cdn). Само это микроприложение я сделал, но как его сохранить в виде библиотеки?
Я использовал команду

yarn run build --target lib --name bRentingCalc ./src/utils/b-renting-calc/index.js

, она создает в dist кучу файлом, общим весом > 800kb, что, кажется, многовато для библиотеки, тем более для такой, о которой идет речь. К тому же я не очень понимаю, что делать с этими файлами дальше. Как, например, подружить их с Wordpress или обычным html-сайтом? В рамках vue-cli проекта подключал обычным образом, используя в index.js самого этого плагина

import BRentingCalc from './BRentingCalc.vue'

export default {
	install(Vue) {
		Vue.component('b-renting-calc', BRentingCalc)
	}
}

в main.js проекта:

import BRentingCalc from './utils/b-renting-calc'
Vue.use(BRentingCalc)

И, наконец, подключая в проекте:

<b-renting-calc />

как всю эту историю сделать универсальной, способной работать как embed-код или какой-либо другой подключаемый плагин на любом сайте?

Answer 1

[Дмитрий Макаров]

Веб так не работает.
Во первых лучше создать несколько файлов с Vue, без Vue, embed, import и уже в зависимости где надо вызывать нужный файл. И все лучше через сборщик
Предлагаю сначала офф гайды Vue глянуть. Оттуда можно понять как подготовить. Потом глянуть npm гайды.
Через костыли в рантайме можно логику реализовать, но предлагаю не делать этого.

А ещё лучше открыть какой нить чужой компонент популярный и изучить что да как

Comments

[Евгений Журов]

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