分类 Vue 下的文章 - 文武的客

标签搜索

binscor

累计撰写 43 篇文章
累计收到 4 条评论

搜索到 1 篇与的结果

在html中通过vue3-sfc-loader引用.vue文件
- 2023年03月06日
- 2,055 阅读
- 0 评论
- 0 点赞
2023-03-06
vue3-sfc-loader通过html的方式直接使用vue的问题已解决，但是在html中如何引用.vue就需要借助一些其他手段了。vue3-sfc-loader可以将vue文件编译之后再引入到当前的html中，它既支持vue2也支持vue3；以下是vue3和elementPlus为例，将.vue文件引入到html中。html<!DOCTYPE html> <head> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/> <script src="//cdn.jsdelivr.net/npm/vue@3"></script> <script src="//cdn.jsdelivr.net/npm/element-plus"></script> <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue2-sfc-loader.js"></script> </head> <body> <div id="app"> <my></my> </div> </body> <script type="module"> const { loadModule } = window['vue3-sfc-loader']; 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 app = Vue.createApp({ components: { 'My': Vue.defineAsyncComponent(() => loadModule('./My.vue', options)) } }); app.use(ElementPlus); app.mount('#app'); </script> </html>My.vue<template> <div class="hello">Hello {{who}}</div> </template> <script> module.exports = { data: function() { return { who: 'world' } } } </script> <style> .hello { background-color: #ffe; } </style>