Vue.js 框架源码与进阶 - NuxtJS 基础

10.1 NuxtJS 介绍

NuxtJS 是什么

• 英文官网
• 中文官网
• GitHub 仓库

Nuxt.js 是一个基于 Vue.js 的第三方开源服务端渲染应用框架，它可以帮我们轻松的实现同构应用。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等非常实用的功能。

NuxtJS 框架是如何运作的

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

• Vue.js
• Vue Router
• Vuex
• Vue Server Renderer

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

NuxtJS 特性

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

NuxtJS 渲染流程

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 切换路由渲染页面）的流程：

NuxtJS 使用方式

• 初始项目
• 已有的 Node.js 服务端项目
  • 直接把 Nuxt 当作一个中间件集成到 Node Web Server 中
• 现有的 Vue.js 项目
  • 非常熟悉 Nuxt.js
  • 至少百分之 10 的代码改动

10.2 初始化 NuxtJS

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

• 官方文档
  • 使用 create-nuxt-app 脚手架工具
  • 手动创建

为了让大家有一个更好的学习效果，这里我们通过手动创建的方式来学习 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 文件生成应用的路由配置。

10.3 NuxtJS 路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

基础路由

• Nuxt.js 官方文档

假设 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'
  	}
  ]
}

路由导航

• a 标签
  • 它会刷新整个页面，不要使用
• <nuxt-link> 组件
  • https://router.vuejs.org/zh/api/#router-link-props
• 编程式导航
  • https://router.vuejs.org/zh/guide/essentials/navigation.html

<template>
  <div>
    <h1>About page</h1>
    <!-- a 链接，刷新导航，走服务端渲染 -->
    <h2>a 链接</h2>
    <a href="/">首页</a>

    <!-- router-link 导航链接组件 -->
    <h2>router-link</h2>
    <router-link to="/">首页</router-link>

    <!-- 编程式导航 -->
    <h2>编程式导航</h2>
    <button @click="onClick">首页</button>
  </div>
</template>

<script>
export default {
   
  name: 'AboutPage',
  methods: {
   
    onClick () {
   
      this.$router.push('/')
    }
  }
}
</script>

动态路由

• 官方文档
  • Vue Router 动态路由