Nuxt.js是一个强大而简单的框架,用于使用Vue.js创建通用,服务器侧渲染应用程序,它由 Next创建;React的服务器侧渲染(SSR)框架。Nuxt由Alex和Sébastien Chopin创建,并在2017年获得了大量关注,所以Chopin兄弟在Vue.js社区中一般成为服务器侧渲染的传教士,特别是在VueConf 2018和Vue.js阿姆斯特丹谈到服务器侧渲染。
Nuxt 和服务器侧渲染可以被认为是其自己的独立技术,一本完整的书可以专注于它们,本文是 Nuxt.js 的简短概述,因此您可以更好地理解它和服务器侧渲染。
为什么要服务器侧重?
这是很棒的,但,什么是服务器侧渲染(SSR)以及为什么你应该关心? 好吧,单页应用程序有一个大问题:许多搜索引擎无法按预期扫描你的应用程序......然而,如果SEO需要发挥一个巨大的作用来成功你的应用程序,这是一个大问题。
单页应用程序有一个大问题:许多搜索引擎无法按预期扫描您的应用程序......尽管如此,如果SEO是您的应用程序开发过程的一大部分,这是一个大问题。
安装 Nuxt.js
您只需要启动 Vue CLI。如果您以前使用过 Vue CLI,那么 Nuxt 命令和架构将非常熟悉您。如果您没有安装 CLI,您可以轻松使用 $ npm install vue-cli。一旦安装,请使用以下命令使用 Nuxt 启动模板启动应用程序:
1$ vue init nuxt-community/starter-template <project-name>
2$ cd <project-name>
3$ npm install
4
5# Launch the project
6$ npm run dev
您应该在浏览器中看到 Nuxt 的动画标志,以及您在 CLI 设置中定义的应用程序的标题和描述。
Nuxt的建筑
就像 CLI 命令一样,Nuxt 的架构与 Vue.js 2 类似,除了一些东西,如页面,中间软件,插件和布局目录,所有这些文件都像你在传统的 Vue 应用程序中所期望的那样工作。
Layouts 目录
该布局目录定义了您的应用程序可以使用的所有不同的布局. 这是一个很好的地方来添加在您的应用程序中使用的通用全球组件,如标题和脚本,例如。
如果你熟悉WordPress,布局可以与WordPress内部的页面模板进行比较。默认情况下,在页面目录中用于.vue文件的默认模板是default.vue。
创建一个新的布局
创建一个新的 Nuxt 布局就像创建一个新的.vue 文件一样简单。例如,如果您想创建一个博客布局,您可以通过将该文件添加到布局目录中,创建一个新的 blog.vue 布局。
<$>[注] 请记住在您的布局中包含 <nuxt/> 标签。
页面目录
页面目录非常复杂,在 Nuxt 中没有路由器文件,而 Nuxt 则会为页面目录中的每一个新的.vue 文件生成新的路由器,你甚至可以通过向目录或.vue 文件添加一个 underscore (_) 来进行动态路由。
例如:
1|__ pages/
2 |__ users/
3 |__ _id.vue
将生成...
1router: {
2 routes: [
3 {
4 name: 'users-id',
5 path: '/users/:id?',
6 component: 'pages/users/_id.vue'
7 },
8 ]
9}
默认情况下,该目录中的每个文件都使用了来自布局目录的default.vue布局,但是,您可以通过添加一个布局属性轻松地将其更改为您可能创建的另一个布局。
1<script>
2export default {
3 layout: 'blog'
4}
5</script>
当然,还有许多其他属性(https://nuxtjs.org/guide/views#pages),你可以添加到 Nuxt 页面。
Middleware 目录
middleware目录包含所有中间件;一组自定义函数,在我们的布局被渲染之前运行。
一个真实世界中间件的例子是每次加载具有安全数据的页面时,都会对用户进行身份验证,换句话说,每次用户访问需要身份验证的路线时,会运行自定义中间件功能,根据用户是否已登录返回Boolean。
插件目录
该插件目录用于添加您想要加载的JavaScript插件,然后在对 root Vue应用程序进行实例化。该目录或多或少是存储插件文件的地方,例如vue-notifications。
如果我们希望在我们的应用程序中显示通知,我们需要在应用程序进行渲染之前启动它。
1[label plugins/vue-notifications.js]
2import Vue from 'vue'
3import VueNotifications from 'vue-notifications'
4
5Vue.use(VueNotifications)
1[label nuxt.config.js]
2module.exports = {
3 plugins: ['~/plugins/vue-notifications']
4}
页面动画和加载栏
关于 Nuxt 的我最喜欢的一件事情是动画支持! 您可以通过使用一些内置的 CSS 类来轻松地动画页面和页面。 在页面之间动画可以使您的应用程序感到流畅和凝聚力。 如果您希望页面在路径之间褪色和褪色,您可以这样做:
1.page-enter-active,
2.page-leave-active {
3 opacity: 1;
4 transition: opacity .25s;
5 animation-duration: .3s;
6 animation-fill-mode: both;
7}
8
9.page-enter-active {
10 animation-name: pageFadeInUp;
11}
12
13.page-leave-active {
14 animation-name: pageFadeOutDown;
15}
16
17.page-enter, .page-leave-to {
18 opacity: 0;
19}
20
21@-webkit-keyframes pageFadeInUp {
22 0% {
23 opacity: 0;
24 transform: translate3d(0, 1.25%, 0);
25 }
26
27 to {
28 opacity: 1;
29 transform: none;
30 }
31}
32
33@-webkit-keyframes pageFadeOutDown {
34 0% {
35 opacity: 1;
36 }
37
38 to {
39 opacity: 0;
40 transform: translate3d(0, 1.25%, 0);
41 }
42}
更改加载栏的颜色
若要更改加载栏的颜色,请在nuxt.config.js文件内部的加载对象中修改 CSS。
1[label nuxt.config.js]
2loading: { color: '#3B8070' },
禁用一个组件的 SSR
有些时候,你不希望页面或组件在服务器侧进行渲染,因为许多原因之一. Nuxt 使这一点非常容易。
1<template>
2...
3 <no-ssr>
4 <some-component />
5 </no-ssr>
6...
7</template>
结论
正如你所看到的, Nuxt 有很多事情要涵盖,但希望您现在能够全面了解 Nuxt 是如何工作的,为什么它很重要,以及如何使用 Nuxt 来设置下一个 Web 应用程序。
如果您正在寻找有关此事的更多信息,Nuxt 包含了大量示例以及社区启动模板本身的 优秀的文档 正如前面提到的那样,优秀的社区在每个目录中添加了 README.md 文件,包含了额外的信息和链接到该目录的文档。