分类： JavaScript

发布于

编写一个Vue Web Components

什么是Web Components

兼容性提示
Web Components 模式不支持 IE11 及更低版本。更多细节

注意对 Vue 的依赖
在 Web Components 模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。这里的包会假设在页面中已经有一个可用的全局变量 Vue。

使用vue-cli构建异步Web components

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'

对package.json中的script进行改造，添加一个build:test命令

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --target wc-async --name hello-World src/components/HelloWorld.vue"
  },

运行脚本

npm run build:test

运行结果如下:

dist目录下将会生成hello-World相关代码

运行结果

引用Web components

将生成的hello-World.js放到http服务目录下

使用script标签加载

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div v-if="componentName">
      <component :is="componentName" msg="这是一个异步组件3" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      componentName: "",
    }
  },
  created() {
    this.initComponents()
  },
  methods: {
    initComponents() {
      if (!customElements.get('hello-world')) {
        const script = document.createElement("script");
        script.setAttribute("src", "http://localhost:3333/component");
        document.body.appendChild(script);
      }

      window.customElements.whenDefined("hello-world").then(res => {
        this.componentName = 'hello-world'
      })
    }
  }
}
</script>

运行效果
运行效果