最近，我爱上了Vue.js的单个文件组件。组件的模板和样式彼此接近会更好，而且我发现我现在编写的bug更少了，因为很容易将页面的一部分组成并在多个位置使用它。
我想知道是否可以将这种单文件组件结构扩展到生成静态HTML页面，而不涉及Vue。
例如，假设我要创建一个页面，该页面具有一个主要的“内容” div，其中包含一个页眉，一个节和一个页脚。使用Vue.js，我可以创建“页眉”，“部分”和“页脚”组件，并使用JavaScript在页面加载后实例化它们。因为页面的每个部分都在其自己的组件中，所以一个组件中的CSS不会影响另一个组件，并且我有一个更加整洁的文件树可编辑。
但是，这似乎有点浪费，因为这些组件实际上不是交互式的：我没有使用v-modelor v-bind或or v-on，我只是使用Vue.js，因为它使我可以分离出页面的一部分。这也意味着如果禁用JavaScript，我的页面将根本无法工作，因为每个元素（保存主要内容div）都取决于Vue是否可用。
那么，有什么方法可以编译.vue文件，而不是编译到使用Vue.js在运行时加载这些组件的页面，而是将没有JavaScript呈现的HTML和CSS文件分开？
理想情况下，我有一个组件“ greeting.vue”：
<template>
<p class="greeting">Hello!</p>
</template>
<style scoped>
.greeting { color: red; }
</style>
在页面内使用：
<html>
<body>
<greeting></greeting>
</body>
</html>
这些文件将被编译成两个文件：一个带有已编译和预渲染模板的HTML页面，以及一个包含所有组件样式的CSS文件。然后，我可以在页面中包含生成的样式表，然后对所有组件进行样式化。
我看过vue-loader和vueify，但是由于我没有足够使用Webpack或Browserify，所以我不明白它们在做什么。
我想做的事可能吗？
我会说您不能这样做，因为
Vue使用虚拟DOM，它不会将模板编译HTML为JavaScriptrender functions，而是将模板编译为JavaScript ，这是在更新数据时有效修补DOM所必需的。我确信可以用一些
node魔术来解析和输出文件来完成您想做的事情，但这对于只产生最小影响的事情来说将是一笔很大的工作。