阅读 537

你应该知道的Nuxt.js 基础知识

官网:zh.nuxtjs.org/
GitHub 仓库:github.com/nuxt/nuxt.j…

Nuxt.js 介绍

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

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

我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

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

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

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

特性

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

Nuxt.js 框架是如何运作的

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

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

压缩并 gzip 后,总代码大小为:57kb (如果使用了 Vuex 特性的话为 60kb)。 另外,Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作(如打包、 代码分层、压缩等等)。

创建项目

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

  • 使用 create-nuxt-app 脚手架工具
  • 手动创建

(1)准备

# 创建示例项目
mkdir nuxt-app-demo

# 进入示例项目目录中
cd nuxt-app-demo

# 初始化 package.json 文件
npm init -y

# 安装 nuxt
npm innstall 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'
  }]
}
复制代码

Nuxt 路由

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

基础路由

假设 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> 组件
  • 编程式导航
<template>
  <div>
    <h1>About page</h1>
    <!-- a 链接,刷新导航,走服务端渲染 -->
    <h2>a 链接</h2>
    <a href="/">首页</a>

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

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

  </div>
</template>

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

<style>

</style>

复制代码

动态路由

在 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 文件。

嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

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

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

假设文件结构如:

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 渲染流程

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

image.png

asyncData 方法

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

基本用法:

  • 它会将asyncData返回的数据融合组件data方法返回数据一并给组件
  • 调用时机:服务端渲染期间和客户端路由更新之前

注意事项:

  • 只能在页面组件中使用
  • 没有this,以为它是在组件初始化之前被调用的
<template>
  <div>
    <h1>{{ title }}</h1>
    <nuxt-link to="/about">About</nuxt-link>
    <br>
    <foo :posts="posts" />
  </div>
</template>

<script>
import axios from 'axios'
import Foo from '@/components/Foo'

export default {
  name: 'HomePage',
  components: {
    Foo
  },

  // 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候,就在 asyncData 中发请求拿数据
  async asyncData () {
    console.log('asyncData')
    console.log(this)
    const res = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'
    })
    return res.data
  },

  // 如果是非异步数据或者普通数据,则正常的初始化到 data 中即可
  data () {
    return {
      foo: 'bar'
    }
  }
}
</script>

<style>

</style>
复制代码
文章分类
前端
文章标签