Question

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

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

但是，我想使用单文件组件，而不是每次将应用程序放在一起时都浪费时间来管理构建过程。简而言之，我希望组件管理带来的好处，而不需要构建工具链的开销，这意味着让浏览器通过*.vue和DOM呈现来引导每个XMLHttpRequest文件的繁重工作。确保我们使用相应的module.exports功能替换import和Vue.component()次来电。

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

Answer 1

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

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

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

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

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

var myTemplate = `
  // template goes here
`; 

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

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

Answer 2

<块引用>

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

我也有同感，决定用 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/

Answer 3

另一种使用方式：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/

Answer 4

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

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

Vite有一个服务器，但是感觉就像以前只有记事本的Web时代。我已经在不到5分钟的时间内运行了演示，就这么简单。

它涵盖或旨在涵盖@mzgajner提及的更详细的信息

就目前而言，我要说的唯一要注意的是，如果您使用Vue 3 beta领域，则立即进入。没有Vue 2.x。

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

4 个答案: