html如何引入vue组件（html文件里怎么引用vue组件？）
导读：这里我们使用 http-vue-loader 来实现：https://www.npmjs.com/package/http-vue-loader...
这里我们使用 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>效果如下：
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！