当前位置:   article > 正文

同构渲染-Nuxt.js_nuxt.js同构

nuxt.js同构

一. 概述

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

二. 特性

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

三. 创建项目

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

  1. 使用 create-nuxt-app 脚手架工具
  2. 手动创建

这里先通过手动创建的方式来学习 Nuxt

1.准备

# 创建示例项目
mkdir nuxt-app-demo
# 进入示例项目目录中 
cd nuxt-app-demo
# 初始化 package.json 文件 
npm init -y
# 安装 nuxt
npm install nuxt
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

package.json 文件的 scripts 中新增:

"scripts": {
  "dev": "nuxt"
},
  • 1
  • 2
  • 3

通过运行 npm run dev 来运行 nuxt

2.创建页面并启动项目

创建pages目录:

mkdir pages
  • 1

创建我们的第一个页面 pages/index.vue :

<template>
  <h1>Hello world!</h1>
</template>
  • 1
  • 2
  • 3

然后启动项目:

npm run dev
  • 1

现在我们的应用运行在 http://localhost:3000 上运行。

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
  • 1

3.Nuxt 中的基础路由

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

假设 pages 的目录结构如下:

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

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

4.路由导航

  • a 标签 导航

    <a href="/" class="href">a标签去首页</a>
    
    • 1
  • 组件导航

    <router-link to="/">router-link去首页</router-link>
    
    • 1
  • 编程式导航

    this.$router.push('/')
    
    • 1

5.动态路由

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

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

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

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

6. 嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个**与该文件同名**的目录用来存放子视图组件。

Warning: 别忘了在父组件( .vue 文件) 内增加 <nuxt-child/> 用于显示子视图内容。
  • 1

文件结构:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
  • 1
  • 2
  • 3
  • 4
  • 5

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

7. 路由配置

  • https://zh.nuxtjs.org/api/configuration-router

8. 视图

  • https://zh.nuxtjs.org/guide/views

9. 异步数据asyncData 方法

  • https://zh.nuxtjs.org/guide/async-data

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

使用注意:

  1. 使用情况:当想动态获取内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中发请求拿数据

  2. 调用时机:服务端渲染期间会被调用,客户端路由更新之前会被调用

  3. asyncData接收一个上下文参数

    • https://zh.nuxtjs.org/api/context
  4. asyncData中拿不到this

  5. asyncData只能在pages文件夹下的组件中使用

  6. 返回的数据会合并进data数据中

import axios from 'axios'
export default {
    name:'HomePage',
    data(){
        return {}
    },
    // layout: 'foo',
    async asyncData(context) {
        //context:上下文内容
        console.log(context);
        //asyncData中拿不到this
        //asyncData只能在pages文件夹下的组件中使用
        console.log('asyncData');
        const res = await axios.get('http://localhost:3000/abc/data.json');
        return res.data
        console.log(res);
    },
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

10. 资源文件

资源文件统一放在static中,并可以忽略文件夹直接获取如:http://localhost:3000/abc/data.json

11. nuxt.config.js配置文件

module.exports = {
    router : {
      	//根路径配置
        base:'/abc',
      	//路由
        extendRoutes(routes, resolve) {
          	//不配置的话路由为/about 这里重命名为/hello
            routes.push({
                mode: 'hash',
                name: 'hello',
                path: '/hello',
                component: resolve(__dirname, 'pages/about.vue')
            })
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

12. 生命周期

钩子函数说明ServerClient
beforeCreate在实例创建之前被调用,此时拿不到数据和 DOM。
created在实例创建完成后被调用,此时可以操作数据了。
beforeMount在挂载开始之前被调用:相关的render函数首次调用。
mounted实例被挂载后调用,此时可以执行一些初始 DOM 操 作。
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。这 里适合在更新之前访问现有的 DOM,比如手动移除已 添加的事件监听器。
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁, 在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的 操作。
activated被 keep-alive 缓存的组件激活时调用。
deactivated被 keep-alive 缓存的组件停用时调用。
beforeDestroy实例销毁之前调用。在这一步,实例完全可用。
destroyed实例销毁后调用。该钩子被调用后,对应 Vue 实例的 所有指令都被解绑,所有的事件监听器被移除,所有 的子实例也都被销毁。
errorCaptured当捕获一个来自子孙组件的错误时被调用。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/751980
推荐阅读
相关标签
  

闽ICP备14008679号