[Day15] 利用 Vue CLI 3 来建立 Web Components 的 JS 档

前面花了大把的时间 , 来建立跟 Vue 很像的 Web Components

其实 Vue CLI 也有提供建立 web-component 的方法

下方来说明一下 ,

利用 vue-cli 建立一个新专案

$ vue create vue-web-component-project

建立一个 .vue 档当作要生成的 web-component

<template>
  <!-- 档案路径 : ./src/components/VueWebComponent.vue -->
  <div>
    <h1>My Vue Web Component</h1>
    <div>{{ msg }}</div>
  </div>
</template>
<script>
  export default {
    props: ['msg']
  }
</script>

利用 build 指令建立 web component

$ vue-cli-service build --target wc --name my-custom-element [entry]

解说一下上方的一些参数

• --target : wc 代表建立 Web-Component
• --name : Web-Component 的名称 ( tag-name )
• [entry] : 入口 , 可以是一个 .js 或一个 .vue 档案。如果没有指定入口，预设使用 src/App.vue。以此次的范例 [enter] = ./src/components/VueWebComponent.vue

执行上述指令後 , 我们就会在 dist 资料夹中 , 得到 demo.html 跟 my-custom-element.js 这两个档案

如果想要在 html 中使用建立出来的 component , 只要跟 demo.html 相同 , 引入 vue 跟 my-custom-element.js 即可使用

<!-- 引入 vue -->
<script src="https://unpkg.com/vue"></script>

<!-- 引入 web component -->
<script src="./my-custom-element.js"></script>

<!-- 使用建立出来的 web component -->
<my-custom-element></my-custom-element>

如果不想要产出的 web component 需要使用者引入 vue 才能用 ,

可以利用 --inline-vue 这个参数将 Vue 放到你的 web component 中

$ vue-cli-service build --target wc --name my-custom-element [entry] --inline-vue

注意对 Vue 的依赖

在 Web Components 模式中，Vue 是外置的。
这意味着包中不会有 Vue，即便你在代码中导入了 Vue。
这里的包会假设在页面中已经有一个可用的全局变量 Vue。
要避免此行为，可以在 build 命令中添加 --inline-vue 标志。

参考资料

• Create & Publish Web Components With Vue CLI 3
• Vue CLI - 构建目标