是否可以将Vue.js模板编译为静态HTML和CSS文件？

最近我爱上了Vue.js的single file components。让组件的模板和样式彼此接近非常好，现在我发现我编写的bug比现在少很多，因为它很容易将页面的一部分分解并在多个地方使用。是否可以将Vue.js模板编译为静态HTML和CSS文件？

我想知道是否可以将此单文件组件结构扩展为生成静态HTML页面，而不涉及Vue。

例如，假设我想要一个包含标题，节和页脚的主“内容”div的页面。使用Vue.js，我可以创建'header'，'section'和'footer'组件，并使用JavaScript在页面加载后实例化它们。因为页面的每个部分都在它自己的组件中，所以一个组件中的CSS不会影响另一个组件，并且我有更清晰的文件树来编辑。

然而，这似乎有点浪费，因为这些组件不实际的互动：我没有使用v-model或v-bind或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。

是我想要做的可能吗？

来源

2017-03-17 Ben S

你在找什么是服务器端渲染。我建议你看看Nuxt.js。

From VueJS docs:

正确配置生产就绪服务器呈现应用程序的所有讨论的方面可以是一个艰巨的任务。幸运的是，有一个优秀的社区项目旨在使这一切变得更加简单： Nuxt.js。 Nuxt.js是一个构建于Vue 生态系统之上的更高级别的框架，它为编写通用Vue应用程序提供了极其简化的开发体验。更好的是，你甚至可以使用它作为一个静态站点生成器（页面创作为单文件Vue组件）！我们强烈建议试一试。

它是超级简单得到它started。如果您使用vue-cli：

$ vue init nuxt/starter <project-name>

它配备了所有你通常不需要（Vuex，路由器，..）。请记住，它强制执行一些文件夹结构，您必须遵循。

Here是包含在起动器中的命令列表。

"scripts": { 
    "dev": "nuxt", 
    "build": "nuxt build", 
    "start": "nuxt start", 
    "generate": "nuxt generate" 
}

你可能会被大部分iterested在generate，因为它

生成应用程序，并生成一个HTML文件（静态主机使用）每路线。

也很酷的事情要注意的是，该项目似乎是（在撰写本文时）under active development，我们可以期待更多的优秀功能！

来源

2017-03-20 19:15:57 Sicky

这就是我最终使用的。 –

我想说你不能这样做，因为Vue使用虚拟DOM，它不会将模板编译到HTML，而是编写模板render functions，这是在数据更新时有效修补DOM的必要条件。

我敢肯定，你可以用神奇的东西来分析和输出文件，但是这对于那些只有最小效果的东西来说是相当大的事情。

来源

2017-03-17 12:26:31

是的，我认为Vue.js本身不会是做这件事的工具。这只是我见过的单文档组件的唯一地方已经在Vue中，所以这是我的参考点。 –

从官方vuejs指南：

如果您使用的WebPack，你可以轻松地添加与prerender-spa-plugin预渲染。它已经通过Vue应用程序进行了广泛测试 - 实际上，创建者是Vue核心团队的成员。

来源

2017-03-17 12:28:59

是否可以将Vue.js模板编译为静态HTML和CSS文件？

回答

相关问题