首页
旅行足迹
友链
留言
关于
壁纸
Search
1
小米12Pro为例,新版小米手机安装magisk获取root教程
3,031 阅读
2
在html中通过vue3-sfc-loader引用.vue文件
2,111 阅读
3
vscode+docker开启Xdebug3功能调试PHP
2,018 阅读
4
目前贼拉好用的ChatGPT应用
1,679 阅读
5
Windows系统删除资源管理器侧边的3D对象等
1,625 阅读
玩机教程
软件设计师
前端
Vue
JavaScript
后端
Python
java
Search
标签搜索
python
flask
Django
爬虫
软件设计师
数据结构
Scrapy
玩机教程
PHP
LNMP
Ubuntu
Hexo
算法
ROOT
刷机
前端
JavaScript
webhook
自动化部署
binscor
累计撰写
43
篇文章
累计收到
4
条评论
首页
栏目
玩机教程
软件设计师
前端
Vue
JavaScript
后端
Python
java
页面
旅行足迹
友链
留言
关于
壁纸
搜索到
1
篇与
的结果
在html中通过vue3-sfc-loader引用.vue文件
2023年03月06日
2,111 阅读
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>