开始

1. 支持 Node.js 14/16
2. 推荐使用 create-nuxt-app 初始化
3. 你可以使用 Playground 立即尝试 Nuxt 2

目录结构

src
├── pages           容纳路由和视图
├── assets          容纳静态资源，如图片和样式，你可以使用 ~/assets/xxx 引用它们
├── components      容纳组件
├── static          容纳直接暴露在网站根目录的文件
├── nuxt.config.js  Nuxt 配置文件
├── ...
├── content         制作博客、文档等类型的站点时常用到这个目录
├── layouts         容纳布局组件
├── middleware      容纳中间件
├── modules         容纳 Nuxt 扩展插件
├── plugins         容纳 Vue 扩展插件
├── store           容纳 Vuex Store 文件

常用命令

nuxt.config.js 有一个 target 属性

• 当 target 为 'static' 时，Nuxt 会生成一个静态站点
  • nuxt dev 命令会启动一个用于调试的 server
  • nuxt generate 命令会生成静态站点，放入 dist 目录
  • nuxt start 命令启动一个静态 server 用于预览网站
• 当 target 为 'server' 时，Nuxt 会运行一个 Node.js 动态站点
  • next dev 命令会启动调试 server
  • next build 命令会使用 webpack 优化并打包代码
    • 如果你想要查询 webpack 配置，可以使用 npx nuxt webpack 字段名
  • next start 命令会启动 Node.js 动态服务器

target 的值默认是 server。

路由

自动路由

pages 目录下的 .vue 文件会自动变成路由：

pages/
  | user/
     | index.vue
     | one.vue
  | index.vue

会变成

routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]

动态路由

目录名如果用下划线开头，如 _slug，那么就会对应路由中的动态片段 :slug。

路由参数

this.$route.params.{参数名}

假设文件名为 users/_id.vue，那么你可以在该文件中使用 this.$route.params.id 获取路由参数。

其他路由

使用 _.vue 可以匹配其他路由，示例：

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

会变成如下路由：

/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue

扩展路由

你可以在 nuxt.config.js 中扩展路由：

export default {
  router: {
    base: '/app/',
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    },
  }
}

导航

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

视图

• Nuxt 渲染的一份 HTML 文档只会包含一个 Layout
• 一个 Layout 里必然至少有一个 Page 组件
• 一个 Page 组件就是一个 Vue 组件，再加上一些额外的属性和函数，如
  • params.slug（假设有对应的 _slug.vue 文件）
  • asyncData() 方法，每次加载组件之前调用，其返回值会被合并到 data 里
  • fetch 全局函数，无需引入，直接使用
  • head() 方法，用来设置页面的 meta 标签
  • layout 属性，用来选择 layout
  • loading 属性，用来控制是否自动启动 $nuxt.$loading
  • transition 属性，用来设置路由过渡动画
  • scrollToTop 属性，用来设置切换路由之后是否滚动页面到最顶部
  • middleware 属性，用来开始中间件
  • watchQuery 属性，用来监听查询参数
  • key 属性，用来设置 Page 组件的 key
• 一个 Layout 可以是
  • layouts/default.vue，默认 Layout
  • layouts/xxx.vue，自定义 Layout
  • layouts/error.vue，用于错误处理，不渲染 <Nuxt /> 插槽
• app.html 用于搭建 HTML 框架

上下文 context

asyncData，plugins，middleware 等函数默认接受一个 context 对象，这个对象的属性如下：

function (context) { 
  // 必有属性
  const {
    app,
    store,
    route,
    params,
    query,
    env,
    isDev,
    isHMR,
    redirect,
    error,
    $config
  } = context

  // 只出现在服务端的属性
  if (process.server) {
    const { req, res, beforeNuxtRender, beforeSerialize } = context
  }

  // 只出现在客户端的属性
  if (process.client) {
    const { from, nuxtState } = context
  }
}

Helpers

$nuxt 对象

你可以通过 Vue 组件的 this.$nuxt 或者 window.$nuxt 来访问它。

• $nuxt.isOffline
• $nuxt.isOnline
• $nuxt.refresh()
• $nuxt.$loading.finish()

onNuxtReady

window.onNuxtReady(() => {
  console.log('Nuxt is ready and mounted')
})

process 对象

• process.client
• process.server
• process.static

SSR

SSR 是指 Node.js 服务端渲染 Vue 组件后发给前端，前端 JS 在经历水合（Hydrate）后再接管组件。

被 SSR 的 Vue 组件和普通的 Vue 组件有些许不同，它既会在 Node.js 服务端执行，也会在浏览器端执行，所以它需要兼容两套环境。

如果某些代码只能在浏览器里执行，那么你可以把这些代码写在 mount 相关的钩子里，或者写在 process.client 为 true 的分支里。

if (process.client) {
  require('external_library')
}

Nuxt 生命周期

Server 端生命周期

1. 服务器启动（nuxt start）
2. 执行 Nuxt 钩子函数
3. 执行服务器中间件
4. 执行 Nuxt 服务端插件
5. 执行 nuxtServerInit
6. 执行中间件 7. 全局中间件 8. Layout 中间件 9. 路由中间件
7. 执行 asyncData
8. beforeCreate
9. created
10. 执行 fetch（先父再子，兄弟节点间并行）
11. 序列化 state，触发 render:routeContext 钩子
12. 渲染 HTML 字符串，触发 render:route 钩子
13. HTML 下载完毕，触发 render:routeDone 钩子

客户端生命周期

1. 接收 HTML
2. 加载资源（如 JS）
3. 执行客户端 Nuxt 插件
4. Vue 水合
5. 执行中间件
   1. 全局中间件
   2. Layout 中间件
   3. 路由中间件
6. asyncData（阻塞，页面不会渲染）
7. beforeCreate
8. created
9. 执行 fetch（非阻塞）
10. beforeMount
11. mounted

使用 NuxtLink 切页面时

1. 执行中间件（全局中间件、Layout中间件、路由中间件）
2. asyncData（阻塞）
3. beforeCreate & created
4. fetch（非阻塞）
5. beforeMount & mounted