Создание и публикация веб-компонентов с Vue CLI 3

Автор оригинала: Anthony Gore.

Есть веб-компоненты «будущее» для веб-платформы? Есть много мнений как для и против. Однако в том, что является то, что поддержка браузера появляется для веб-компонентов, и существует растущее количество инструментов и ресурсов для авторов, заинтересованных в создании и публикации веб-компонентов самого собственного.

Отличный инструмент для создания веб-компонентов является Vue.js, и было сделано еще проще с выпуском Vue CLI 3 и нового @ Vue/Web-компонент-обертка библиотека.

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

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js В 2018/05/21.

Что такое веб-компоненты?

Вы знакомы, конечно, с элементами HTML, такие как Divs, Spals, Tables и т. Д. Веб-компоненты являются Пользовательские HTML-элементы, которые можно использовать и повторно использовать в веб-приложениях и веб-страницах.

Например, вы можете создать пользовательский элемент под названием Видеоплеер Таким образом, вы можете предоставить многоразовый видеоинтерфейс, который имеет функции пользовательского интерфейса за то, что доступно со стандартным HTML 5 видео элемент. Этот элемент может предоставить атрибут «SRC» для видеофайла и событий, таких как «PLAY», «PAUSE» и т. Д., Чтобы получить потребителю программно контролировать его:

Это, вероятно, звучало очень похоже на то, что могут сделать обычные компоненты Vue! Разница в том, что веб-компоненты являются родными для браузера (или, по крайней мере, будут в качестве спецификации постепенно реализованы) и могут использоваться как обычные элементы HTML. Независимо от того, какие инструменты, которые вы используете для создания вашего веб-компонента, вы можете потреблять его в реакцию, угловой и т. Д., Или даже без структуры вообще.

function ReactComponent() {
  return(
    A Vue.js web component used in React!
    
  );
}

Как вы создаете веб-компонент?

Внутри веб-компоненты изготавливаются стандартными элементами HTML, которые браузер уже знает E.g. Divs, Spens и т. Д. Итак …| Видеоплеер может выглядеть так внутри:

Веб-компоненты могут включать CSS и JavaScript. Используя новые стандарты браузера, такие как Shadow DOM, эти аспекты полностью инкапсулированы в рамках вашего пользовательского компонента, чтобы потребитель не нужно беспокоиться о том, как их CSS могут перезаписать правила в веб-компонент.

Есть, конечно, API вы будете использовать для объявления веб-компонентов. Но нам не нужно знать о тех, кто сейчас, так как мы будем использовать Vue как слой абстракции.

Для более глубокого введения читать Веб-компоненты – Введение Отказ

Создание веб-компонентов с @ vue/web-компонент-обертка

Создание веб-компонентов легко с Vue CLI 3 и новым @ Vue/Web-компонент-обертка библиотека.

Библиотека @ Vue/Web-Component-Component-Component-Component обеспечивает обертку вокруг компонента VUE, который взаимодействует на его API-компонентах. Обертка автоматически прокси свойства, атрибуты, события и слоты. Это означает, что вы можете написать рабочее веб-компонент с не более чем вашим знанием Vue Components!

Еще одна отличная библиотека Vue для создания веб-компонентов Vue-Custom-Element Отказ

Чтобы создать веб-компонент, не забудьте установить Vue CLI 3 и создать новый проект с любыми настройками среды, которые вам нравятся:

$ vue create vue-web-component-project

Теперь создайте новый компонент Vue, который вы хотите использовать в качестве веб-компонента. Этот компонент будет составлен WebPack перед публикацией, поэтому вы можете использовать любые функции JavaScript для этого. Мы просто сделаем что-то действительно просто как доказательство концепции, хотя:

SRC/Компоненты/vuewebcomponent.vue

Чтобы подготовить компонент для упаковки @ Vue/Web-компонент-оболочкой, убедитесь, что ваш входной файл, SRC/Main.js выглядит так:

SRC/Main.js.

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';

const CustomElement = wrap(Vue, VueWebComponent);

window.customElements.define('my-custom-element', CustomElement);

API для регистрации веб-компонента customelents.define () Отказ Обратите внимание, что «пользовательский элемент» и «веб-компонент» являются синонимом в этом контексте.

Создайте веб-компонент с Vue CLI 3

Vue CLI 3 включает в себя много отличных новых функций (выезд эта статья для подножия). Один из них – CLI Service Что использует WebPack для различных задач, включая создание вашего приложения для производства. Это можно сделать с помощью простых Vue-Cli-Service Build команда. Добавляя --target WC Переключатель, вы можете создать комплект, который идеально подходит для создания веб-компонента:

$ vue-cli-service build --target wc --name my-custom-element ./src/main.js

За кулисами это будет использовать WebPack для создания одного файла JavaScript со всем необходимым для включения вашего веб-компонента. При включении на страницу этот сценарий регистрирует , который завернул целевой Vue Component, используя @ vue/web-компонент-обертку.

Потребление вашего Vue веб-компонента на веб-странице

С вашего компонента теперь построен, вы или любой другой, можете использовать его в проекте без Vue без какого-либо кода Vue.js (хотя вам нужно будет импортировать библиотеку Vue, так как это намеренно не добавляется в комплект, чтобы избежать повторения в случае Где вы используете несколько веб-компонентов на основе VUE). Пользовательский элемент действует точно так же, как нативный элемент HTML, как только вы загрузили скрипт, который его определяет на странице.

Обратите внимание, что важно включить полифиллирование, поскольку большинство браузеров не поддерживают все спецификации веб-компонента. Вот я использую WebComponents.js (v1 specilfills) Отказ

index.html.




  
    
    
    
    My Non-Vue App

Оно работает! Если вы хотите использовать код, я имею в виду шаблон, я положил его в репо здесь Отказ

Издательский

Наконец, если вы хотите поделиться своим веб-компонентом с миром, нет лучшего места, чем WebComponents.org Отказ Этот сайт имеет платущую коллекцию веб-компонентов бесплатно для скачивания. Показанные компоненты были построены из различных каркасов, включая Vue, полимер, угловые и т. Д.

дальнейшее чтение

Документы для @ Vue/Web-компонент-обертка
Документы для Vue cli 3 строить цели
Веб-компоненты – Введение

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше