本文翻译自：
翻译不当之处，欢迎指正交流
web components是web平台的未来吗？关于这一问题支持和反对的观点有很多。事实上浏览器对web components的支持正在逐渐形成，并有越来越多的工具、资源和it从业人员正在致力于创建发布自己的web components。
vue.js是一个创建web components的很好的工具，在更新的vue cli 3和中甚至更加简单。
这篇文章中，我们会讨论为什么你需要创建一个web components并向你展示如何在仅有vue基础知识的情况下创建你的第一个web components。
note: this article was originally posted here on the vue.js developers blog on 2018/05/21 [本文章原创发布地址]
相信你已经对html元素（div，spans，tables等）很熟悉了，web components是一种定制的，可以在web app和web页面中使用并复用的html元素。
例如，你可以创建一个定制的element叫做 video-player ，并且
可以提供一个可重用的video接口, 它的 ui 功能超出了标准 html 5 视频元素的可用范围。这个元素能够为video文件和事件（如：播放play，暂停pause等）提供一个“src”属性，允许用户以编程方式来控制它。
<div> <video-player src="..." onpause="..."></video-player> </div>
这听起来或许很像常规的vue components做的，不同之处就在于web components是浏览器原生的（或者说至少会随着规范来逐步实现）并能够像html元素一样来用。无论如何，不管你用什么工具去创建你的web components你都可以在react，angular等框架中（甚至不需要使用框架）来使用它。
我要评论function reactcomponent() {
return(
<h1>a vue.js web component used in react! </h1>
<video-player></video-player>
);
}
在内部，web components由浏览器早已熟悉的标准html元素构成，如divs，spans等。所以video-player在内部看起来更像这样:
<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
通过vue cli3和新的库创建web components十分方便。
@vue/web-component-wrapper库提供了一个通过web componentapi接入vue组件的容器。这个容器能够自动代理properties，attributes，events和slot。这意味着你可以仅用你现有的vue components知识写一个web components！
关于创建webcomponents另一个vue库
创建一个webcomponent，先确保已安装vue cli3并通过任何你熟悉的环境创建一个新的项目。
$ vue create vue-web-component-project
现在创建一个新的可以作为web component来使用的vue component.这个组件在发布前可以通过webpack来编辑，所以你可以使用任何javascript的特性。但这里我们只是做一些简单的雏形来进行可行性的概念验证：
src/components/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
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包括了许多不错的新特性（查看的摘要）。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项目中使用它使用并不需要任何vue.js的代码(即便你为了避免重复刻意不添加绑定而需要导入vue库 作为在这种情况下，where你使用多个基于vue的web components)一旦你加载定义在页面上的脚本时，定制的元素就起到了原生html元素的作用。
请注意, 包含polyfill（填充代码）是非常必要的, 因为大多数浏览器本身并不支持所有web component规范。在这里，我使用webcomponents.js (v1 spec polyfills)
<!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，没有比更好的地方了。这个网站有一个供免费下载web component的可浏览收藏夹，所展示的是由vue,polymer,abgular等各种框架构建的组件。
扩展阅读
• docs for
• 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
如对本文有疑问， 点击进行留言回复！！
Rimworld 太好玩了，强烈推荐 尤其是加了各种mod后
【程序】Marvell 88W8686 WiFi模块（WM-G-MR-09）创建或连接热点，并使用lwip2.0.2建立http服务器（20171030版）
网友评论