如何将.vue组件文件与静态html文件一起使用(cdn或vue-cli?)

问题描述 投票:2回答:1

Brief:我可以使用某些.vue“单个文件组件”以及index.html(而不是main.js)来开发Vue项目吗?如果是,那怎么办?


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

cdn方法,我可以将Vue组件扔到静态index.html文件中,这些组件(通常)是使用语法app.jsVue.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上,并且可以立即反映出更改吗?

vue.js github github-pages cdn vue-cli
1个回答
0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.