这里我们使用 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>
效果如下：
