位置: IT常识 - 正文
html文件里怎么引用vue组件？(html文档怎么写)
发布时间：2024-01-03html文件里怎么引用vue组件？ 
本文链接地址:https://www.jiuchutong.com/zhishi/284018.html
转载请保留说明！
推荐整理分享html文件里怎么引用vue组件？(html文档怎么写)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html怎么样,html文件放在哪里,html文件怎么放进文件夹,html怎样,html文件怎么放进文件夹,文件html怎么能导入word文档里,html文件怎么弄,html文件怎么弄,内容如对您有帮助，希望把文章链接给更多的朋友！
这里我们使用 http-vue-loader 来实现：https://www.npmjs.com/package/http-vue-loader
Load .vue files directly from your html/js. No node.js environment, no build step.
我做了个demo如下：
html文件里面写下面的代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>测试页面</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="app"> <kaimo-info></kaimo-info> </div> <script> new Vue({ el: "#app", data: function () { return { }; }, components: { 'kaimo-info': httpVueLoader('./component/KaimoInfo.vue'), }, methods: { }, }); </script> </body></html>KaimoInfo.vue 组件里写下面的代码，注意使用的是 module.exports
<template> <div class='kaimo-info'> {{msg}} </div></template><script>module.exports = { name: 'KaimoInfo', data () { return { msg: "hello http-vue-loader --- kaimo " }; }, created() { }, mounted() { }, methods: { },};</script><style scoped></style>效果如下：
上一篇：鸟瞰施内贝格山脉-奥克森峰，德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)
下一篇：宇航员杰夫·威廉姆斯在国际空间站拍摄到的地球 (© Jeff Williams/NASA)(johnny kim宇航员)
