Nuxt.js 服务端渲染框架入门

645 阅读3分钟

这是我参与更文挑战的第19天,活动详情查看: 更文挑战

Nuxt.js 是什么

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

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

Nuxt.js 框架是如何运作的?

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

  • Vue 2
  • Vue-Router
  • Vuex (当配置了 Vuex 状态树配置项 时才会引入)
  • Vue 服务器端渲染 (排除使用 mode: 'spa')
  • Vue-Meta

压缩并 gzip 后,总代码大小为:57kb (如果使用了 Vuex 特性的话为 60kb)。

另外,Nuxt.js 使用 Webpackvue-loaderbabel-loader 来处理代码的自动化构建工作(如打包、代码分层、压缩等等)。

特性

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • es6 语法支持
  • 支持 http/2推送
  • ...

目录结构

-
|- static/ 静态文件目录,服务器启动的时候,该目录下的文件会映射至应用的根路径 /
|- assets/ 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
|- layouts/ 布局
|- middleware/ 中间件
|- plugins/
|- components/ 组件目录,没有页面组件的 asyncData 方法的特性
|- pages/ 页面目录
|- nuxt.config.js 配置文件
|- app.html 模板

路由

<template>
    <nuxt-link to="/">首页</nuxt-link>
</template>

类似<router-link to="/">首页</router-link>

基础路由

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

自动生成路由配置如下:

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

动态路由

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

对应的路由配置:

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

视图

image.png

模板

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

默认模板:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

布局

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

默认布局

<template>
  <nuxt />
</template>

自定义布局

blog.vue

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>

使用自定义布局:

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

异步数据

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

asyncData

asyncData 方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。

注意:由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法,你可以选择自己熟悉的一种来用:

  • 返回 Promise
  • 使用 async/await
  • 使用回调函数

Vuex 状态树

使用状态树

Nuxt.js 会尝试找到 src 目录(默认是应用根目录)下的 store 目录,如果该目录存在,它将做以下的事情:

  • 引用 vuex 模块
  • 将 vuex 模块 加到 vendors 构建配置中去
  • 设置 Vue 根实例的 store 配置项

Nuxt.js 推荐使用模块模式来使用 store:store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块)