在 Vue 3 下将二次封装的 Ant Designer 组件打包成 Web Component
之前 Vue3 结合 Ant Designer 开发了个组件，最近说这个组件要用到 Vue2 的工程上，经过一番讨论决定采用 Web Component 作为中间方案。
假设原来的组件文件名是 todo.vue，我们要做的就是用 Vue3 的 defineCustomElement API 对它进行封装，如下
// main.ts
import { defineCustomElement } from 'vue'
import Todo from 'path/to/todo.vue'
const TodoElement = defineCustomElement(Todo)
customElements.define('bl-todo', TodoElement)
然后通过 CLI 命令进行 build，我这里用的是 Vue CLI，build 命令为 vue-cli-service build path/to/main.ts
在 Vue2 的工程里面引用 build 出来的 js 和 css 文件，再在 html 中写入
<bl-todo></bl-todo>
Watch Out
封装成 Web Component 后
- 传参要注意，之前像
appId这样的驼峰写法，现在要改成app-id这种短横线的写法 - 事件的回调参数也被封装了，具体看这个连接
到这里就是 Vue3 组件封装成 Web Component 的大体步骤，那么下面就是一些和 Ant Designer 的调整了。
需要在每个要打包成 WC 的 Vue 组件里，引入 Ant Designer 的 css，而且需要用 <link> 引入，import 没效果（这个不知道是不是我配置的问题，反正由于这个修改对原组件造成了“破坏”，所以我新建一个 todeo.ce.vue 用于构建）；
如果你使用的 Ant 的组件有类似 dropdown 这种会有个 slot 添加到 body 上的，那你 slot 里的样式要写到外面去，然后在 main.ts 中 import 进来，否则当你打开下来的时候样式就没了
