没有构建过程的 Vue.js 单文件组件答案

【问题标题】：Vue.js single file components WITHOUT a build process没有构建过程的 Vue.js 单文件组件
【发布时间】：2017-04-11 08:06:24
【问题描述】：

我喜欢 vue.js，因为它很简单，这意味着我可以使用现代、直观的数据绑定语法和没有复杂的工具链来破解一个快速的单页 SPA。

我也喜欢 single-file components 的想法，这意味着每个组件都在一个位置（*.vue 文件）存储 DOM、样式和脚本功能。

但是，我想使用单文件组件，而不会在每次将应用程序放在一起时浪费时间管理构建过程。简而言之，我希望在没有构建工具链开销的情况下享受组件管理的好处，这意味着让浏览器通过XMLHttpRequest 和DOM 渲染来完成引导每个*.vue 文件的繁重工作。确保我们将 module.exports 和 import 调用替换为相应的 Vue.component() 功能。

我很想知道是否有人遇到过在浏览器上使用*.vue 文件的客户端（仅限）解决方案。确定这已经完成了吗？

【问题讨论】：

我没看过。如果您不想在构建过程上浪费时间，您可以使用 vue-cli github.com/vuejs/vue-cli，它会为您处理所有这些。
使用热模块更换后，我很乐意承担一些构建开销/流程以提高我的工作效率。
我可以理解不想从头开始设置构建过程，但根本不想使用一个有点极端。
您使用什么后端技术？我正在为完全相同的想法而苦苦挣扎……
嗨@MariuszJamro，关键是我不想使用后端技术为我做组件的拼接。我希望这一切都发生在浏览器中。

标签： javascript ajax components vue.js

【解决方案1】：

我绝对确定这还不存在，因为虽然它看起来相对容易，但某些功能会使其很难实现。例如：

您不一定只导入其他 .vue 组件，您可以导入随机的外部依赖项。这意味着浏览器现在需要下载和解析 npm 模块，处理它们的依赖关系等等。
.vue 组件的不同部分（模板、逻辑和样式）可以用 HTML、JS 和 CSS 以外的语言编写。这意味着浏览器现在还需要为 Jade、CoffeeScript、LESS 或您正在使用的任何其他东西下载编译器/转译器，并通过它运行您的代码。请注意，无法保证这种用 JavaScript 编写的转译器确实存在，因为在常规构建过程中使用的节点模块可能只是某些无法在浏览器中运行的外部库的包装器。
.vue 组件中的样式可以是scoped，这意味着您现在需要解析组件的模板以将随机生成的 ID 作为元素属性插入，并解析同一组件的样式以将相同的 ID 插入您的 CSS 选择器，以便最终确定您的样式。

这些只是我脑海中最明显的那些。当然，您可以严格限制自己并且不使用任何这些功能，但它不再是真正的 .vue 组件，是吗？

如果你真的想不惜一切代价避免构建过程并愿意接受不使用上述任何功能的限制，为什么不只使用单个 JS 文件：

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

你必须以正确的顺序加载它们，但是你有它，一个穷人的单一文件组件。

【讨论】：

感谢@mzgajner，深思熟虑，表达得很好。很高兴看到有人试图回答如何而不是为什么。我个人认为客户端加载器功能需要与服务器端一样广泛才能有用。 +1 并标记为正确答案（.. 希望直到有更好的答案出现）。
谢谢，你说得有道理。我认为这样的东西不存在的主要原因是我们优化了低功耗手机的前端，所以我们在构建过程中尽可能多地做，我们不限于任何特定的语言/环境。因此，我们最终得到了必须用 JS 重写的工具，因此在开发过程中使用某种热重载会更容易。
这不再是正确答案。拥有+10K 的用户请使用github.com/edgardleal/require-vuejs 投票以从@Oscar Gardiazabal 取消删除以下答案。谢谢。

【解决方案2】：

另一种方式是使用：http-vue-loader

直接从您的 html/js 加载 .vue 文件。没有 node.js 环境，没有构建步骤。

https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js

与 unpkg cdn 相同

https://unpkg.com/http-vue-loader

这里是一个例子

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

或者你可以从外部加载你的组件，比如

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

查看示例：https://codepen.io/mikechen2017/pen/wEdbBN/

【讨论】：

事情已经发生了变化。现在这是正确的答案，尽管完整的解决方案是有不止一个库可以做到这一点（即require-vuejs 似乎工作类似）。

【解决方案3】：

现在是 2020 年，而 Evan You 就在上周写了 https://github.com/vuejs/vite。

我很想知道是否有人遇到过客户端（仅限）解决方案...

Vite 有一个服务器，但它感觉就像我们刚刚拥有记事本时的 Web 旧时代。我在不到 5 分钟的时间内运行了演示，就这么简单。

它涵盖或旨在涵盖@mzgajner 提到的更精细的细节

目前，我想说的是，如果您使用 Vue 3 测试版，您将立即进入该领域。没有 Vue 2.x。

【讨论】：

【解决方案4】：

但是，我想使用单文件组件，而不会在每次将应用程序放在一起时浪费时间管理构建过程。简而言之，我想要组件管理的好处，而不需要构建工具链的开销

我同意这个观点，并决定通过vue-blocks 解决这个问题。只需一个脚本标签即可开始，无需构建工具，完全是客户端。

它可以从服务器jsfiddle example加载vue文件（虽然有一些限制）：

<template src="path/to/vue-file.vue"></template>

Vue Blocks 允许你在 html 文档中编写多个 vue 组件，如下所示：

<template component="sample-component">
    <div>
        <h1>Sample component</h1>
    </div>
    <style>
    </style>
    <script>
        export default {
            data() {
                return {}
            },
            mounted() {},
            methods: {
                xx() {

                }
            }
        }
    </script>
</template>

jsfiddle 中的工作演示：https://jsfiddle.net/o48L0y9j/

【讨论】：