使用CLI 3 建立发布Web Components

时间 2019-11-19

标签使用 cli 建立发布 web components 栏目 HTML 繁體版

原文原文链接

本文翻译自：codementor
javascript

翻译不当之处，欢迎指正交流html

Web Components是web平台的将来吗？关于这一问题支持和反对的观点有不少。事实上浏览器对Web Components的支持正在逐渐造成，并有愈来愈多的工具、资源和IT从业人员正在致力于建立发布本身的Web Components。vue

Vue.js是一个建立Web Components的很好的工具，在更新的Vue CLI 3和@vue/web-component-wrapper中甚至更加简单。
这篇文章中，咱们会讨论为何你须要建立一个Web Components并向你展现如何在仅有Vue基础知识的状况下建立你的第一个Web Components。
Note: this article was originally posted here on the Vue.js Developers blog on 2018/05/21 [本文章原创发布地址] java

什么是Web Components

相信你已经对HTML元素（div，spans，tables等）很熟悉了，Web Components是一种定制的，能够在web app和web页面中使用并复用的HTML元素。
例如，你能够建立一个定制的element叫作 video-player ，而且
能够提供一个可重用的video接口, 它的 UI 功能超出了标准 HTML 5 视频元素的可用范围。这个元素可以为video文件和事件（如：播放play，暂停pause等）提供一个“src”属性，容许用户以编程方式来控制它。react

<div>
<video-player src="..." onpause="..."></video-player>
</div>

这听起来或许很像常规的Vue components作的，不一样之处就在于web components是浏览器原生的（或者说至少会随着规范来逐步实现）并可以像HTML元素同样来用。不管如何，无论你用什么工具去建立你的web components你均可以在react，angular等框架中（甚至不须要使用框架）来使用它。webpack

function ReactComponent() { return( <h1>A Vue.js web component used in React! </h1>
    <video-player></video-player> ); }

如何建立一个web component?

在内部，web components由浏览器早已熟悉的标准HTML元素构成，如divs，spans等。因此video-player在内部看起来更像这样:git

<div>
  <video src="..."></video>
  <div class="buttons">
    <button class="play-button"></button>
    <button class="pause-button"></button> ... </div> ... </div>

Web components也能够包含CSS和Javascript。使用新的浏览器标准像Shadow DOM这种，经过你本身定制的组件彻底封装，所以用户不须要担忧CSS会覆盖web component中的规则。
固然，您将用API声明自带的web 组件。但咱们目前不须要知道，由于咱们将使用的的是一个抽象层
更多深刻介绍 Web Components - Introduction
github

使用@vue/web-component-wrapper建立web components

经过Vue CLI3和新的@vue/web-component-wrapper库建立web components十分方便。
@vue/web-component-wrapper库提供了一个经过web componentAPI接入Vue组件的容器。这个容器可以自动代理properties，attributes，events和slot。这意味着你能够仅用你现有的Vue components知识写一个web components！
关于建立webcomponents另外一个vue库vue-custom-element
建立一个webcomponent，先确保已安装Vue CLI3并经过任何你熟悉的环境建立一个新的项目。web

$ vue create vue-web-component-project

如今建立一个新的能够做为web component来使用的Vue component.这个组件在发布前能够经过webpack来编辑，因此你可使用任何JavaScript的特性。但这里咱们只是作一些简单的雏形来进行可行性的概念验证：
src/components/VueWebComponent.vueajax

<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

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);

用来注册一个组建的APIcustomElements.define()注意custom element和web component在这方面是同样的

用Vue CLI3构建一个web component

Vue CLI3包括了许多不错的新特性（查看这篇文章的摘要）。CLI Service使用的是Webpack来处理多项任务包括构建你本身的项目代码。这一点能够经过简单的vue-cli-service build指令来完成。经过添加

--target wc来转换，你能够建立一个依赖，完美地建立一个web component:

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

在幕后,使用webpack来处理单独的javascript文件和全部必须的内置web components。当被包含在一个页面内时，<my-custom-element> 这个脚本注册了一个用@vue/web-component-wrapper包裹着目标的Vue组件

在网页中使用你的Vue web component

随着你的组建的构建, 任何人均可以在一个非Vue项目中使用它使用并不须要任何Vue.js的代码(即使你为了不重复刻意不添加绑定而须要导入Vue库做为在这种状况下，where你使用多个基于Vue的web components)一旦你加载定义在页面上的脚本时，定制的元素就起到了原生HTML元素的做用。
请注意, 包含polyfill（填充代码）是很是必要的, 由于大多数浏览器自己并不支持全部web component规范。在这里，我使用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>

这段代码是有效的，若是你想把这段代码做为模板来引用的话，我把它们放到了这里

发布

最后，如果你想和全部人分享你的web component，没有比webcomponents.org更好的地方了。这个网站有一个供免费下载web component的可浏览收藏夹，所展现的是由Vue,Polymer,Abgular等各类框架构建的组件。

扩展阅读
• Docs for @vue/web-component-wrapper
• Docs for Vue CLI 3 Build Targets

• Web Components - Introduction

Get the latest Vue.js articles, tutorials and cool projects in your inbox with the Vue.js Developers Newsletter