本文翻译自：codementor

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

Web Components是web平台的未来吗？关于这一问题支持和反对的观点有很多。事实上浏览器对Web Components的支持正在逐渐形成，并有越来越多的工具、资源和IT从业人员正在致力于创建发布自己的Web Components。

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 blogon 2018/05/21 [本文章原创发布地址]

  • 什么是Web Components

相信你已经对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 component?

在内部，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/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并通过任何你熟悉的环境创建一个新的项目。

$ 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构建一个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

使用CLI 3 创建发布Web Components的更多相关文章

  1. 腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

    Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...

  2. IIS首次发布VS2012创建的web应用程序时注册.net4.0

    最近用VS2012创建的web应用程序,.net环境设置成了4.0,在用IIS发布的时候发现需要注册下.net4.0才能配置应用程序. 首先确保配置的电脑上已经安装了.net4,找到.net4所在文件 ...

  3. 转：OWASP发布Web应用程序的十大安全风险

    Open Web Application Security Project(OWASP)是世界范围内的非盈利组织,关注于提高软件的安全性.它们的使命是使应用软件更加安全,使企业和组织能够对应用安全风险 ...

  4. 怎样创建.NET Web Service http://blog.csdn.net/xiaoxiaohai123/article/details/1546941

    为什么需要Web Service 在通过internet网购买商品后,你可能对配送方式感到迷惑不解.经常的情况是因配送问题找配送公司而消耗你的大量时间,对于配送公司而言这也不是一项增值服务. 为了解决 ...

  5. 使用Eclipse创建Maven Web工程

    方法/步骤 1 使用Eclipse创建Maven Web工程 2 找到Maven Project,点击Next 3 勾选上Create a simple project (不使用骨架),Next 4 ...

  6. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  7. vs2012 发布web应用程序

    Visual Studio 2012 Visual Studio Express 2012 for Web 与 的Visual Studio 2010  Visual Studio Web发布更新 与 ...

  8. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

  9. C#中自己动手创建一个Web Server（非Socket实现）

    目录 介绍 Web Server在Web架构系统中的作用 Web Server与Web网站程序的交互 HTTPListener与Socket两种方式的差异 附带Demo源码概述 Demo效果截图 总结 ...

随机推荐

  1. struts2数据处理的几种方式

    package com.loaderman.c_data; import java.util.Map; import javax.servlet.ServletContext; import com. ...

  2. vue-template-compiler作用

    vue-template-compiler的作用是什么: 看起来 template-compiler是给parse函数使用的, 那么parse函数是干什么的呢 先看一下parse的结果: 结论:使用v ...

  3. 工具类 分页工具类PageParamBean

    自己编写的分页工具类,根据不同的数据库类型,生成对应的分页sql信息,分享给大家,希望大家共勉,工具类有些地方,大家可能不需要,请根绝自己的需要进行修改使用,核心逻辑都在,如果大家觉得有什么不妥,欢迎 ...

  4. python web开发flask框架 安装与环境

    # encoding:utf-8 # 从flask这个框架中导入Flask这个类 from flask import Flask # 初始化一个Flask对象 # Flasks() # 需要传递一个参 ...

  5. iOS10权限问题

    下图就是Info.plist的常用的权限问题: * 麦克风权限:Privacy - Microphone Usage Description 是否允许此App使用你的麦克风? * 相机权限: Priv ...

  6. C基础知识(12)：可变参数

    该功能需要使用<stdarg.h>.函数的最后一个参数写成省略号,即三个点号(...),省略号之前的那个参数是int,代表了要传递的可变参数的总数.该文件提供了实现可变参数功能的函数和宏. ...

  7. JavaScript(3)：JSON

    <!DOCTYPE html> <html> <body> <p>JSON</p> <script> // JSON 值可以是: ...

  8. 【MyEclipse优化】-----如何合理设置MyEclipse中的validation选项

    打开eclipse,点击[window]菜单,选择[preferences]选项. 在左侧点击[validation]选项,在右侧可以看到eclipse进行的自动检查都有哪些内容. 将Manual(手 ...

  9. 【AMAD】django-filer -- 一个管理文件和图片的django app

    动机 简介 个人评分 动机 django-filer1可以让你像一些云存储一样使用WEB UI控制你的文件. 简介 下面是前端图片:   个人评分 类型 评分 实用性 ⭐️⭐️⭐️⭐️ 易用性 ⭐ ...

  10. django中Queryset的删除问题、分页问题

    在开发选课界面时需要过滤掉已经选择过的课程,之前一直以为QuerySet是列表的结构,所以打算在判断之后使用list.remove()方法将已选的课程除掉,但在实际操作时,发现这么做并不行,原来Que ...