html引入vue3使用vue组件
插件地址: https://github.com/FranckFreiburger/vue3-sfc-loader
同级目录下添加 一个 myComponent.vue组件
<html> <body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script> <script> const options = { moduleCache: { vue: Vue }, async getFile(url) { const res = await fetch(url); if ( !res.ok ) throw Object.assign(new Error(res.statusText + ' ' + url), { res }); return { getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(), } }, addStyle(textContent) { const style = Object.assign(document.createElement('style'), { textContent }); const ref = document.head.getElementsByTagName('style')[0] || null; document.head.insertBefore(style, ref); }, } const { loadModule } = window['vue3-sfc-loader']; const app = Vue.createApp({ components: { 'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) ) }, template: '<my-component></my-component>' }); app.mount('#app'); </script> </body> </html>