Статьи

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

Октябрь 29, 2017

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

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

Будут ли веб-компоненты в будущем?

Отличным инструментом для создания веб-компонентов является 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 и т. Д.

Веб-компоненты - Обзор

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

50
Share: