Являются ли веб-компоненты «будущим» для веб-платформы? Есть много мнений как за, так и против. Однако фактом является то, что появляется поддержка браузеров для веб-компонентов, и растет число инструментов и ресурсов для авторов, заинтересованных в создании и публикации собственных веб-компонентов.
Отличным инструментом для создания веб-компонентов является Vue.js, и он стал еще проще с выпуском Vue CLI 3 и новой библиотеки @ vue / web-component-wrapper .
В этой статье я расскажу о причинах, по которым вы, возможно, захотите создать веб-компоненты, и покажу, как вы делаете свой первый, не более чем базовые знания Vue.
Что такое веб-компоненты?
Разумеется, вы знакомы с такими элементами HTML, как div, spans, таблицы и т. Д. Веб-компоненты — это пользовательские элементы HTML, которые можно использовать и повторно использовать в веб-приложениях и веб-страницах.
Например, вы можете создать пользовательский элемент с именем, video-player
чтобы вы могли предоставить видеоинтерфейс многократного использования, который имеет функции пользовательского интерфейса помимо того, что доступно со стандартным video
элементом HTML 5 . Этот элемент может предоставлять атрибут «src» для видеофайла и такие события, как «воспроизведение», «пауза» и т. Д., Чтобы потребитель мог программно управлять им:
<div>
<video-player src="..." onpause="..."></video-player>
</div>
Вероятно, это очень похоже на то, что могут делать обычные компоненты Vue! Разница заключается в том, что веб-компоненты являются родными для браузера (или, по крайней мере, будут, поскольку спецификации реализуются постепенно) и могут использоваться как обычные элементы HTML. Независимо от того, какие инструменты вы используете для создания веб-компонента, вы можете использовать его в React, Angular и т. Д., Или даже вообще без фреймворка.
function ReactComponent() {
return(
<h1>A Vue.js web component used in React!</h1>
<video-player></video-player>
);
}
Как вы создаете веб-компонент?
Внутри веб-компоненты создаются стандартными HTML-элементами, которые браузер уже знает, например, div, spans и т. Д. video-player
Внутренне это может выглядеть так:
<div>
<video src="..."></video>
<div class="buttons">
<button class="play-button"></button>
<button class="pause-button"></button>
...
</div>
...
</div>
Веб-компоненты также могут включать в себя CSS и JavaScript. Используя новые стандарты браузера, такие как Shadow DOM, эти аспекты полностью инкапсулированы в вашем пользовательском компоненте, поэтому пользователю не нужно беспокоиться о том, как его CSS может перезаписать правила в веб-компоненте, например.
Конечно, есть API, которые вы будете использовать для естественного объявления веб-компонентов. Но нам не нужно знать о них прямо сейчас, так как мы будем использовать Vue как слой абстракции.
Для более подробного ознакомления прочитайте Веб-компоненты — Введение .
Создание веб-компонентов с помощью @ vue / web-component-Wrapper
Создавать веб-компоненты легко с помощью Vue CLI 3 и новой библиотеки @ vue / web-component-wrapper .
Библиотека @ vue / web-component-wrapper предоставляет оболочку для компонента Vue, который связывает его с API-интерфейсами веб-компонентов. Оболочка автоматически передает свойства, атрибуты, события и слоты. Это означает, что вы можете написать работающий веб-компонент, обладающий не более чем знанием компонентов Vue!
Еще одна замечательная библиотека Vue для создания веб-компонентов — это vue-custom-element .
Чтобы создать веб-компонент, обязательно установите Vue CLI 3 и создайте новый проект с любыми настройками среды, которые вам нравятся:
$ vue create vue-web-component-project
Теперь создайте новый компонент Vue, который вы хотите использовать в качестве веб-компонента. Этот компонент будет скомпилирован Webpack перед публикацией, поэтому вы можете использовать любые функции JavaScript для этого. Мы просто сделаем что-то действительно простое в качестве доказательства концепции:
SRC / компоненты / VueWebComponent.vue
<template>
<div>
<h1>My Vue Web Component</h1>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
Чтобы подготовить компонент к переносу с помощью @ vue / web-component-wrapper, убедитесь, что ваш файл ввода, 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 для регистрации веб-компонента есть
customElements.define()
. Обратите внимание, что «пользовательский элемент» и «веб-компонент» являются синонимами в этом контексте.
Создание веб-компонента с помощью Vue CLI 3
Vue CLI 3 включает в себя множество замечательных новых функций (ознакомьтесь с этой статьей ). Одним из них является служба CLI, которая использует Webpack для решения различных задач, включая создание кода приложения для производства. Это можно сделать с помощью простой vue-cli-service build
команды. Добавив --target wc
переключатель, вы можете создать пакет, который идеально подходит для создания веб-компонента:
$ vue-cli-service build --target wc --name my-custom-element ./src/main.js
За кулисами будет использоваться Webpack для создания единого файла JavaScript со всем необходимым для вашего веб-компонента. При включении на страницу этот сценарий регистрируется <my-custom-element>
, который обернул целевой компонент Vue с помощью @ vue / web-component-wrapper.
Использование вашего веб-компонента Vue на веб-странице
Теперь, когда ваш компонент собран, вы или кто-либо другой можете использовать его в не-Vue проекте без какого-либо кода Vue.js (хотя вам нужно будет импортировать библиотеку Vue, поскольку она намеренно не добавляется в комплект, чтобы избежать повторения в случае где вы используете несколько веб-компонентов на основе Vue). Пользовательский элемент действует точно так же, как и собственный HTML-элемент, после того как вы загрузили скрипт, который определяет его на странице.
Обратите внимание, что очень важно включить полифилл, поскольку большинство браузеров изначально не поддерживают все спецификации веб-компонентов. Здесь я использую webcomponents.js (v1 spec polyfills) .
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Non-Vue App</title>
</head>
<body>
<!--Load Vue-->
<script src="https://unpkg.com/vue"></script>
<!--Load the web component polyfill-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<!--Load your custom element-->
<script src="./my-custom-element.js"></script>
<!--Use your custom element-->
<my-custom-element msg="Hello..."></my-custom-element>
</body>
</html>
Оно работает! Если вы хотите использовать код я со ссылкой на в качестве шаблона, я положил его в репо здесь .
Издательский
Наконец, если вы хотите поделиться своим веб-компонентом со всем миром, нет лучшего места, чем webcomponents.org . На этом сайте доступна для просмотра коллекция веб-компонентов, которые можно бесплатно скачать. Представленные компоненты были построены из различных сред, включая Vue, Polymer, Angular и т. Д.
Дальнейшее чтение
- Документы для @ vue / web-component-wrapper
- Документы для Vue CLI 3 Build Targets
- Веб-компоненты — Введение