Экспорт отдельных компонентов Vue в виде веб-компонентов - PullRequest
Новая
       7

Экспорт отдельных компонентов Vue в виде веб-компонентов

0 голосов
/ 01 июня 2018

У меня есть приложение Vue, которое я собрал за последние несколько дней, определяя набор компонентов, которые будут встроены в другое приложение;приложение Vue предназначено для быстрой разработки и выполняет роль тестового набора компонентов.

Теперь я подошел к вопросу добавления этих компонентов в основное приложение, не предназначенное для Vue, для которого они предназначены.Я знаю, что могу создавать веб-компоненты с npm run build -- --target wc, но я не хочу встраивать все приложение для тестирования в один компонент;скорее я хочу встроить отдельные компоненты Vue из приложения в отдельные распространяемые веб-компоненты.

Как этого добиться?

1 Ответ

0 голосов
/ 01 июня 2018

С @ vue / cli-service-global (в настоящее время в бета-версии) вы действительно можете создавать веб-компоненты из своего Vue SFC.

Вы можете пропуститьваше приложение ("test harness"), указав файлы компонентов в виде глобуса в аргументе CLI ввода : 

$ vue-cli-service build --target wc --name foo 'src/components/*.vue'

Однако при этом все равно будет создан один файл JS, содержащий все ваши пользовательскиеЭлементы.

Вы можете дополнительно отделить эти отдельные элементы в чанках , используя вместо этого цель Async Web Components (то есть wc-async вместо wc): 

$ vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

Затем вы включаете сгенерированный файл загрузчика foo.js как <script> в ваш HTML-файл.Он определит все ваши пользовательские элементы, но не загрузит их до того, как они появятся в DOM.

...