Vue服务端渲染之Nuxt.js上手

说在前头：本文主要简书Nuxt.js框架的基本使用，该框架集成度比较高，但文档比较全，主要参考官方文档。

安装

使用官方提供的脚手架。按照官方文档，使用npx命令安装。什么，你还不知到npx？

npx create-nuxt-app <项目名>

然后进行一些选择，比如选择什么服务端框架，这里我选了Koa

还会让你选择UI框架，这里我选了Element

其余的都是常见的一些选项。

 

nuxt.config.js配置

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

举例：配置全局css，在 Nuxtjs 里配置全局的 CSS 文件、模块、库。 (每个页面都会被引入)。

使用sass

npm install node-sass sass-loader --save-dev

nuxt.conf.js中添加css资源

module.exports = {
  css: [
    // 直接加载一个 Node.js 模块。（在这里它是一个 Sass 文件）
    'bulma'
    // 项目里要用的 CSS 文件
    '@/assets/css/main.css',
    // 项目里要使用的 SCSS 文件
    '@/assets/css/main.scss'
  ]
}

assets/css/main.scss

$baseColor : skyblue;
 
body{
    background: $baseColor;
}

这是页面背景变成天蓝色，配置全局css成功。

 

路由

跟普通Vue项目区别较大，Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。意思是说，nuxt.js中可以不用写router规则，只需按规则在pages目录下创建文件即可。

Nuxt.js中使用<nuxt-link>替代普通Vue项目中的<router-link>，使用<nuxt/>替代<router-view>

基础路由

layouts/default.vue

<template>
  <div>
    <nuxt-link to="/news">全部新闻</nuxt-link>
    <nuxt-link to="/news/sport">体育新闻</nuxt-link>
    <nuxt/>
  </div>
</template>

pages目录

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

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'news',
      path: '/news',
      component: 'pages/news/index.vue'
    },
    {
      name: 'news-sport',
      path: '/news/sport',
      component: 'pages/news/sport.vue'
    }
  ]
}
'
运行
运行

效果

动态路由

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

pages目录

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

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

页面获取参数方式没变，还是$route.parms.xx

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

路由参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举例：pages/users/_id.vue页面中

export default {
    validate ({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
    }
}

如果校验方法返回的值不为 true或Promise中resolve 解析为false或抛出Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

下面是动态路由与路由参数校验的效果

嵌套路由

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

官方文档例子：

pages目录

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

过度动画

Nuxt.js 默认使用的过渡效果名称为 page

我们可以在公共样式表中加入样式，比如

assets/css/main.scss

.page-enter-active, .page-leave-active {
    transition: all .5s;
}
.page-enter, .page-leave-to {
    opacity: 0;
}
.page-enter{
    transform: translateX(0);
}
.page-leave-to{
    transform: translateX(200px)
}

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：比如

sport.vue

export default {
    transition: 'sport'
}

再在assets/css/main.scss添加

.sport-enter-active, .sport-leave-active {
    transition: all .5s;
}
.sport-enter, .sport-leave-to {
    opacity: 0;
}
.sport-enter{
    transform: translateX(0);
}
.sport-leave-to{
    transform: translateY(200px)
}

最后效果

中间件（路由钩子）

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。每一个中间件应放置在 middleware/ 目录。一个中间件接收 context 作为第一个参数。

举例：在middleware目录下创建auth.js文件

auth.js

export default function(context){
    console.log('进入到auth中间件')
    //获取客户端设备信息
    context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
    console.log(context.userAgent)
}

然后在 nuxt.config.js 中加入配置项

router: {
    middleware: 'auth'
}

中间件实现拦截权限判断

更详细的路由配置请看官方文档。