最近我爱上了Vue.js的单个文件组件.让组件的模板和样式彼此接近是非常好的,而且我发现我编写的bug很少,因为它很容易组合部分页面并在多个地方使用它.
我想知道我是否可以将这个单文件组件结构扩展为生成静态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,我无法理解他们正在做什么.
我正在尝试做什么？
从官方vuejs指南：
如果您使用的是Webpack，则可以使用prerender-spa-plugin轻松添加预渲染。它已经通过Vue应用程序进行了广泛的测试-实际上，创建者是Vue核心团队的成员。
您正在寻找的是服务器端渲染。我建议您看看Nuxt.js。
正确配置生产就绪的服务器渲染的应用程序的所有讨论方面可能是一项艰巨的任务。幸运的是，有一个出色的社区项目旨在使所有这些变得更容易：Nuxt.js。Nuxt.js是在Vue生态系统之上构建的高级框架，该框架为编写通用Vue应用程序提供了极其简化的开发体验。更好的是，您甚至可以将其用作静态站点生成器（页面被编写为单文件Vue组件）！我们强烈建议您尝试一下。
入门非常简单。如果您使用vue-cli：
$ vue init nuxt/starter <project-name>
它带有您通常需要的所有东西（Vuex，路由器等）。请记住，它强制执行某些文件夹结构，您必须遵循。
这是启动器中包含的命令列表。
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
}
您可能大部分时间都在 generate，因为它
构建应用程序，并将每个路由生成为HTML文件（用于静态托管）。
还需要注意的很酷的事情是，该项目似乎（在编写本文时）正在积极开发中，我们可以期待更多出色的功能！
| 归档时间： |
|
| 查看次数： |
6938 次 |
| 最近记录： |