同构渲染-Nuxt.js

一. 概述

• Nuxt.js 是一个基于Vue.js 的现代化服务端渲染应用框架，它可以轻松的实现同构应用。
• Nuxt.js 主要关注的是应用的 UI渲染。
• Nuxt.js可以初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
• Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 除此之外，还提供了一种命令叫: nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。
• 作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据 加载、中间件支持、布局支持等非常实用的功能。

二. 特性

1. 基于 Vue.js 、Vue Router、Vuex、Vue SSR
2. 自动代码分层
3. 服务端渲染
4. 强大的路由功能，支持异步数据
5. 静态文件服务
6. ES6+ 语法支持
7. 打包和压缩 JS 和 CSS
8. HTML 头部标签管理
9. 本地开发支持热加载
10. 集成 ESLint
11. 支持各种样式预处理器: SASS、LESS、 Stylus 等等 支持 HTTP/2 推送

三. 创建项目

Nuxt 提供了两种方式用来创建项目:

1. 使用 create-nuxt-app 脚手架工具
2. 手动创建

这里先通过手动创建的方式来学习 Nuxt

1.准备

# 创建示例项目
mkdir nuxt-app-demo
# 进入示例项目目录中 
cd nuxt-app-demo
# 初始化 package.json 文件 
npm init -y
# 安装 nuxt
npm install nuxt

在 package.json 文件的 scripts 中新增:

"scripts": {
  "dev": "nuxt"
},

通过运行 npm run dev 来运行 nuxt。

2.创建页面并启动项目

创建pages目录:

mkdir pages

创建我们的第一个页面 pages/index.vue :

<template>
  <h1>Hello world!</h1>
</template>

然后启动项目:

npm run dev

现在我们的应用运行在 http://localhost:3000 上运行。

注意:Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

3.Nuxt 中的基础路由

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

假设 pages 的目录结构如下:

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

那么，Nuxt.js 自动生成的路由配置如下:

router: {
  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'
    }
  ]
}

4.路由导航

• a 标签 导航

  <a href="/" class="href">a标签去首页</a>
  

• 组件导航

  <router-link to="/">router-link去首页</router-link>
  

• 编程式导航

  this.$router.push('/')
  

5.动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的**以下划线作为前缀**的 Vue 文件 或 目录。如以下目录结构:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    }, 
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    }, 
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    }, 
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    } ]
}

你会发现名称为users-id的路由路径带有:id?参数，表示该路由是可选的。如果你想将它设置为必 选的路由，需要在 users/_id 目录内创建一个index.vue 文件。

6. 嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个**与该文件同名**的目录用来存放子视图组件。

Warning: 别忘了在父组件( .vue 文件) 内增加 <nuxt-child/> 用于显示子视图内容。

文件结构:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下:

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
				}, 
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
				} 
      ]
		} 
  ]
}

7. 路由配置

• https://zh.nuxtjs.org/api/configuration-router

8. 视图

• https://zh.nuxtjs.org/guide/views

9. 异步数据asyncData 方法

• https://zh.nuxtjs.org/guide/async-data

Nuxt.js 扩展了 Vue.js，增加了一个叫asyncData的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

使用注意:

1. 使用情况:当想动态获取内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中发请求拿数据

2. 调用时机:服务端渲染期间会被调用,客户端路由更新之前会被调用

3. asyncData接收一个上下文参数

   • https://zh.nuxtjs.org/api/context

4. asyncData中拿不到this

5. asyncData只能在pages文件夹下的组件中使用

6. 返回的数据会合并进data数据中

import axios from 'axios'
export default {
    name:'HomePage',
    data(){
        return {}
    },
    // layout: 'foo',
    async asyncData(context) {
        //context:上下文内容
        console.log(context);
        //asyncData中拿不到this
        //asyncData只能在pages文件夹下的组件中使用
        console.log('asyncData');
        const res = await axios.get('http://localhost:3000/abc/data.json');
        return res.data
        console.log(res);
    },
}

10. 资源文件

资源文件统一放在static中,并可以忽略文件夹直接获取如:http://localhost:3000/abc/data.json

11. nuxt.config.js配置文件

module.exports = {
    router : {
      	//根路径配置
        base:'/abc',
      	//路由
        extendRoutes(routes, resolve) {
          	//不配置的话路由为/about 这里重命名为/hello
            routes.push({
                mode: 'hash',
                name: 'hello',
                path: '/hello',
                component: resolve(__dirname, 'pages/about.vue')
            })
        }
    }
}

12. 生命周期

钩子函数	说明	Server	Client
beforeCreate	在实例创建之前被调用，此时拿不到数据和 DOM。	✔	✔
created	在实例创建完成后被调用，此时可以操作数据了。	✔	✔
beforeMount	在挂载开始之前被调用:相关的render函数首次调用。	❌	✔
mounted	实例被挂载后调用，此时可以执行一些初始 DOM 操 作。	❌	✔
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。这 里适合在更新之前访问现有的 DOM，比如手动移除已 添加的事件监听器。	❌	✔
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁， 在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的 操作。	❌	✔
activated	被 keep-alive 缓存的组件激活时调用。	❌	✔
deactivated	被 keep-alive 缓存的组件停用时调用。	❌	✔
beforeDestroy	实例销毁之前调用。在这一步，实例完全可用。	❌	✔
destroyed	实例销毁后调用。该钩子被调用后，对应 Vue 实例的 所有指令都被解绑，所有的事件监听器被移除，所有 的子实例也都被销毁。	❌	✔
errorCaptured	当捕获一个来自子孙组件的错误时被调用。	✔	✔