boyzzy1995

Nuxt.js学习笔记

1 Nuxt介绍

1.1什么是Nuxt.js

Nuxt.js是一个基于Vue.js的通用应用框架。
通过对客户端/服务端基础框架的抽象组织，Nuxt.js主要关注的是应用的UI渲染。
Nuxt.js的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础代码结构。或者在已有的Node.js项目中使用Nuxt.js。其中预设了利用Vue.js开发服务端渲染的应用所需的各种配置。
除此之外，Nuxt.js还提供了一种命令叫：nuxt generate为基于Vue.js的应用提供生成对应的静态站点的功能。（Nuxt官方网站说：我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的Web应用迈开的新一步。
作为框架Nuxt.js为客户端/服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

1.2为什么要使用Nuxt.js

主要是为了实现服务端的渲染（SSR）。

那么什么是SSR呢？为什么要使用SSR？

1.2.1 什么是服务端渲染（SSR）？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

1.2.2 为什么使用服务器端渲染(SSR)？

与传统的SPA（单页面应用程序）相比，服务端渲染的优势主要有哪些？

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
如果你的应用程序初始展示Loading菊花图，然后通过Ajax获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果SEO对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间（首屏加载更快），因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以用户体验更好

使用服务器端渲染(SSR)时还需要有一些权衡之处：

首先就是开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。。
由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境下，还要做好服务器负载和缓存策略

1.2.3 SSR应用场景：

有SEO的需求
需要首屏渲染速度快

1.2.4 实现Vue SSR的两种方式：

基于官方Vue SSR指南文档的官方方案，官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。
vue.js通用应用框架--NUXT，NUXT提供了平滑的开箱即用的体验，它建立在同等的Vue技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。

1.2.5 搭建一个NUXT项目：

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>

或者用yarn ：

$ yarn create nuxt-app <项目名>

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ npm run dev

安装过程十分的简单，这里附上官方的安装方式地址：https://zh.nuxtjs.org/guide/installation

提示：总的来说Nuxt.js官网中第一章介绍还是很重要的需要仔细阅读。

部分内容转载自：https://zhuanlan.zhihu.com/p/51000902

2 Nuxt目录结构

Nuxt.js 的应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。

2.1 目录

当你使用npx命令安装完成之后将会有如下目录。

2.1.1 assets（资源目录）

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。

2.1.2 components（组件目录）

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

2.1.3 layouts（布局目录）

布局目录 layouts 用于组织应用的布局组件。

该目录名为Nuxt.js保留的，不可更改。

（1）视图

（2）模板

你可以定制化 Nuxt.js 默认的应用模板。

定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

默认模板为：



  
    {{ HEAD }}
  
  
    {{ APP }}

举个例子，你可以修改模板添加 IE 的条件表达式：




  
    {{ HEAD }}
  
  
    {{ APP }}

（3）布局

Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。

默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

提示: 别忘了在布局文件中添加组件用于显示页面的主体内容。

默认布局的源码如下：

自定义布局

layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个 博客布局 并将其保存到layouts/blog.vue:

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

（4）页面

页面组件实际上是 Vue 组件，只不过 Nuxt.js 为这些组件添加了一些特殊的配置项（对应 Nuxt.js 提供的功能特性）以便你能快速开发通用应用。

Nuxt.js 为页面提供的特殊配置项：

属性名	描述
asyncData	最重要的一个键, 支持异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象。
fetch	与 `asyncData` 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 `fetch` 方法不会设置组件的数据。详情请参考关于fetch方法的文档。
head	配置当前页面的 Meta 标签, 详情参考页面头部配置API。
layout	指定当前页面使用的布局（`layouts` 根目录下的布局文件）。详情请参考关于布局的文档。
loading	如果设置为`false`，则阻止页面自动调用`this.$nuxt.$loading.finish()`和`this.$nuxt.$loading.start()`,您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置`loading`的情况下。请参考API配置 `loading` 文档。
transition	指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop	布尔值，默认: `false`。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate	校验方法用于校验动态路由的参数。
middleware	指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。

（5）HTML 头部

Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。

Nuxt.js 使用以下参数配置 vue-meta:

{
  keyName: 'head', // 设置 meta 信息的组件对象的字段，vue-meta 会根据这 key 值获取 meta 信息
  attribute: 'n-head', // vue-meta 在监听标签时所添加的属性名
  ssrAttribute: 'n-head-ssr', // 让 vue-meta 获知 meta 信息已完成服务端渲染的属性名
  tagIDKeyName: 'hid' // 让 vue-meta 用来决定是否覆盖还是追加 tag 的属性名
}

默认 Meta 标签

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：

注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key

一个使用自定义 viewport 和 谷歌字体 的配置示例：

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

想了解 head 变量的所有可选项的话，请查阅 vue-meta 使用文档。

关于 Nuxt.js 应用 HTML 头部配置的更多信息，请参考 HTML 头部配置 API。

个性化特定页面的 Meta 标签

关于个性化特定页面的 Meta 标签，请参考页面头部配置API。

注意: 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。

2.1.4 middleware（中间件目录）

middleware 目录用于存放应用的中间件。

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数：

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

中间件可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数：

middleware/stats.js

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

然后在你的 nuxt.config.js 、 layouts 或者 pages 中使用中间件:

nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }
}

stats 中间件将在每个路由改变时被调用。

如果你想看到一个使用中间件的真实例子，请参阅在 GitHub 上的example-auth0。

2.1.5 pages（页面目录）

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

该目录名为Nuxt.js保留的，不可更改。

2.1.6 plugins（插件目录）

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

2.1.7 static（静态文件目录）

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

该目录名为Nuxt.js保留，不可更改。

2.1.8 Store 目录

store 目录用于组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。