如何将.vue组件文件与静态html文件一起使用（cdn或vue-cli？）

Question

Brief：我可以使用某些.vue“单个文件组件”以及index.html（而不是main.js）来开发Vue项目吗？如果是，那怎么办？

---

我对VueJ还是很陌生。我知道我可以通过cdn或通过vue-cli安装项目。我知道：

cdn方法，我可以将Vue组件扔到静态index.html文件中，这些组件（通常）是使用语法app.js在Vue.component('my-component', {})文件中创建的。

• 优点：我可以立即将其部署到GitHub上的存储库中，我的源代码也是我的部署文件。如果我使用GitHub page，它将立即运行，因为它可以在我的仓库的根目录中找到index.html文件（而不是文件夹./dist/）。
• 缺点：我看到.js文件的格式和结构不良，template放在反引号中``VSCode上仅显示黄色（语法突出显示不佳）。我还不知道使用这种方法将组件分成文件的方法。

vue-cli方法，我可以使用多个“单个文件组件” .vue将我的组件分成可管理的块。模板放在<template></template>标记内，而不是反引号内，这使我可以在VSCode上更好地突出显示语法。但是，我必须“构建”它以获取index.html文件（放置在./dist/文件夹中-不在根项目中）。

我的问题是如何结合两者的优势？使用.vue文件和同时index.html文件进行编码？如果没有build，我可以将push源代码放到Github page repo上，并且可以立即反映出更改吗？

Answer 1

根据您的评论，我建议使用http-vue-loader。它将.vue文件直接读取到您的html中，无需node.js环境，无需构建设置。