参考
<!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>` }
<#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>