极客观点
项目管理
HarmonyOS
最近迷上了 Vue.js 的 单文件组件。组件的模板和样式彼此接近要好得多，而且我发现我写的错误少了很多，因为很容易将页面的一部分组件化并在多个地方使用它。
我想知道我是否可以扩展这个单文件组件结构来生成静态 HTML 页面，而不涉及 Vue。
例如，假设我想要一个包含主要“内容”div 的页面，其中包含标题、部分和页脚。使用 Vue.js，我可以创建“header”、“section”和“footer”组件，并使用 JavaScript 在页面加载后实例化它们。因为页面的每个部分都在其自己的组件中，所以一个组件中的 CSS 不可能影响另一个组件，而且我可以编辑更清晰的文件树。
但是，这似乎有点浪费，因为这些组件实际上并不是交互式的：我没有使用 v-model 或 v-bind 或 v-on , I使用 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。
我正在尝试做的事情可能吗？
原文由 Ben S 发布，翻译遵循 CC BY-SA 4.0 许可协议
您正在寻找的是服务器端渲染。我建议你看看 Nuxt.js。
来自 VueJS 文档：
上手 非常简单。如果您使用
vue-cli：它附带了您通常需要的一切（Vuex、路由器等）。请记住，它会强制执行一些您必须遵循的文件夹结构。
以下 是启动器中包含的命令列表。
您可能主要关注
generate，因为它另外值得注意的是，该项目似乎（在撰写本文时） 正在积极开发 中，我们可以期待更多强大的功能！