Nuxt.js是什么?

  • 一个基于 Vue.js 的通用应用框架
  • 基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用
  • 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
  • 提供了一种命令叫:nuxt generate,为基于 Vue.js 的应用提供生成对应的静态站点的功能
  • 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等

Nuxt.js的特性

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

目录结构

1
2
3
4
5
6
7
8
9
10
11
├── assets/        # 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
├── components/ # 组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性。
├── layouts/ # 布局目录 layouts 用于组织应用的布局组件
├── middleware/ # middleware 目录用于存放应用的中间件
├── pages/ # 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
├── plugins/ # 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
├── server/ #
├── static/ # 静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下
├── store/ # 用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store 目录下创建一个 index.js 文件可激活这些配置
├── nuxt.config.js # 用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置
├── package.json # 用于描述应用的依赖关系和对外暴露的脚本接口

配置

Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
build: {}, // 根据服务端需求,自定义 webpack 的构建配置,如babel配置、devServer配置等
cache: true, // 开启组件缓存策略以提升渲染性能
css: [], // 配置全局的 CSS 文件、模块、库
dev: true, // 配置 Nuxt.js 应用是开发模式还是生产模式
env: {}, // 配置在客户端和服务端共享的环境变量, 通过 process.env.* 或 context.*来使用
generate: {}, // 配置 Nuxt.js 应用生成静态站点的具体方式,当运行 nuxt generate 命令或在编码中调用 nuxt.generate() 时,Nuxt.js 会使用 generate 属性的配置
head: {}, // 配置应用默认的meta标签
loading: {}, // 用于个性化定制 Nuxt.js 使用的加载组件, 在页面切换的时候,Nuxt.js 使用内置的加载组件显示加载进度条。可以定制它的样式,禁用或者创建自己的加载组件
modules: [], // modules是Nuxt.js扩展,可以扩展它的核心功能并添加无限的集成
modulesDir: [], // 用于设置路径解析的模块目录,例如:webpack resolveLoading,nodeExternal和postcss
plugins: [], // 用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
rootDir: '', // 用于配置 Nuxt.js 应用的根目录,该配置项的一个限制是应用的 node_modules 目录必须在 rootDir 目录内
router: {}, // 用于覆盖 Nuxt.js 默认的 vue-router 配置
srcDir: '', // 用于配置应用的源码目录路径,默认值为 rootDir 的值
transition: {} // 用于个性化配置应用过渡效果属性的默认值,
}

路由

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

基础路由

假设 pages 的目录结构如下:

1
2
3
4
5
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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'
}
]
}

动态路由

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

假设 pages 的目录结构如下:

1
2
3
4
5
6
7
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'
}
]
}

模板

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

默认模板为:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

举个例子,可以修改模板添加 IE 的条件表达式:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

布局

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

默认布局

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。需要在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

默认布局的源码如下:

1
2
3
<template>
<nuxt/>
</template>

错误页面

通过编辑 layouts/error.vue 文件来定制化错误页面,这个布局文件不需要包含 <nuxt/> 标签。可以把这个布局文件当成是显示应用错误(404,500等)的组件。

举一个个性化错误页面的例子 layouts/error.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">页面不存在</h1>
<h1 v-else>应用发生错误异常</h1>
<nuxt-link to="/">首 页</nuxt-link>
</div>
</template>

<script>
export default {
props: ['error'],
layout: 'blog' // 可以为错误页面指定自定义的布局
}
</script>

页面

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

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

属性名 描述
asyncData 最重要的一个键, 支持异步数据处理,会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用,另外该方法的第一个参数为当前页面组件的上下文对象。Nuxt.js 会将asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。
fetch 与 asyncData 方法类似,用于在渲染页面之前获取数据填充应用的状态树(store)。不同的是 fetch 方法不会设置组件的数据。
head 配置当前页面的 Meta 标签
layout 指定当前页面使用的布局(layouts 根目录下的布局文件)
loading 如果设置为false,则阻止页面自动调用,
transition 指定页面切换的过渡动效
scrollToTop 渲染页面前是否需要将当前页面滚动至顶部
validate 用于校验 动态路由的参数
middleware 指定页面的中间件,中间件会在页面渲染之前被调用