参考

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拆分模块</title>
</head>
<body>
    <pre>
        curl https://unpkg.com/vue@3/dist/vue.global.js -O vue.global.js
    </pre>
    <script src="vue.global.js"></script>
    <div id="app"></div>
    <script type="module">
         const { createApp, ref } = Vue
        import MyComponent from './my-component.js'

        createApp(MyComponent).mount('#app')
    </script>
</body>

</html>

// my-component.js
const { createApp, ref } = Vue
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}

Web Components 组件

<#macro comment target,type>
    <#if !post.disallowComment!false>
        <script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
        <script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/npm/halo-comment-normal@1.1.1/dist/halo-comment.min.js'}"></script>
        <script>
        var configs = {
            autoLoad: true,
            showUserAgent: true
        }
        </script>
        <halo-comment id="${target.id?c}" type="${type}" :configs="configs"/>
    </#if>
</#macro>