【nuxt】nuxt.js攻略

nuxt.js攻略

一、什么是nuxt.js

Nuxt.js 是一个基于 Vue.js 的开源框架，用于构建高性能、可扩展的单页面应用（SPA）和服务端渲染应用（SSR）。它提供了一组强大的功能，简化了 Vue.js 应用程序的开发过程，并且具有优化性能、SEO 友好、易于维护等特点。

二、nuxt.js特性

  • 服务端渲染 (SSR)

    Nuxt.js 支持服务端渲染，将 Vue.js 应用程序渲染为 HTML，使得页面在首次加载时具有更快的加载速度，并且对于搜索引擎爬虫更加友好。

  • 一键式应用部署

    Nuxt.js 提供了简单的命令来构建应用程序，并自动优化应用程序的文件结构和路由配置，使得应用程序在部署到服务器时变得更加简单。

  • 自动生成路由

    Nuxt.js 支持根据项目目录结构自动生成路由配置，无需手动配置路由，这使得项目的组织更加清晰，并且减少了开发人员的工作量。

  • 内置的静态文件服务器

    Nuxt.js 内置了静态文件服务器，可以方便地部署静态资源，并提供服务端渲染和预渲染的能力，同时支持自定义路由和页面。

  • 插件系统

    Nuxt.js 提供了丰富的插件系统，可以通过插件来扩展和定制应用程序的功能，例如添加第三方库、增强构建过程等。

  • 自动代码拆分

    Nuxt.js 支持自动将代码拆分为更小的块，根据页面的需求动态加载，从而提高应用程序的加载速度和性能。

  • 支持 Vue 生态系统

    作为 Vue.js 的扩展，Nuxt.js 支持 Vue 生态系统的各种功能和工具，例如 Vuex 状态管理、Vue Router 路由管理等。

  • 集成了各种优化工具

    Nuxt.js 集成了各种优化工具，例如代码压缩、自动预加载、优化图片等，可以帮助开发人员提高应用程序的性能。

三、目录结构

├── assets # 用于存放静态资源文件，如图片、样式表、字体等
├── components # 存放可重用的 Vue 组件
├── layouts # 存放布局组件，用于定义页面的整体布局结构
├── middleware # 存放中间件，用于在路由跳转或页面渲染之前执行一些逻辑
├── pages # 存放页面组件，用于生成应用程序的路由，每个文件对应一个路由
├── plugins # 存放插件，用于扩展应用程序的功能
├── static # 用于存放静态文件，这些文件会被直接复制到生成的静态站点中
├── store # 存放 Vuex 状态管理相关的代码，包括模块化的 Vuex store
├── .editorconfig # 用于配置编辑器的规范
├── .eslintrc.js # ESLint 配置文件，用于代码规范检查
├── .gitignore # Git 忽略文件配置
├── nuxt.config.js # Nuxt.js 项目的配置文件，用于配置构建过程中的各种选项
└── package.json # 项目的 package.json 文件，包含项目的依赖和配置信息

四、功能介绍

nuxt.config.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
module.exports = {
  // 设置应用程序的渲染模式
  mode: 'universal', // 或 'spa' 或 'static'
  
  // 指定应用程序源代码目录的路径
  srcDir: 'src',
  
  // 设置 HTML 文档的头部信息
  head: {
    title: 'My Nuxt.js App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  
  // 配置全局样式表文件
  css: [
    '@/assets/main.css'
  ],
  
  // 配置插件
  plugins: [
    '@/plugins/vue-plugin.js'
  ],
  
  // 配置 Nuxt.js 模块
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],
  
  // 配置 Vue Router 的选项
  router: {
    middleware: 'authenticated'
  },
  
  // 配置环境变量
  env: {
    apiUrl: process.env.API_URL
  },
  
  // 配置构建选项
  build: {
    // 扩展 Webpack 配置
    extend(config, ctx) {
    }
  },
  
  // 配置服务器选项
  server: {
    // 服务器端口，默认为 3000
    port: 3000,
    // 服务器主机地址，默认为 'localhost'
    host: '0.0.0.0'
  },
  
  // 配置静态站点生成选项
  generate: {
    // 指定生成的静态站点目录
    dir: 'dist',
    // 指定生成的静态站点路由列表
    routes: [
      '/about',
      '/contact'
    ]
  }
}

布局、页面、组件

  • 页面组件（Page Components）

    页面组件是 Nuxt.js 应用程序中的顶级组件，用于表示页面的不同部分或整个页面。它们通常存放在 pages 目录中，并且每个页面组件对应着一个路由。

    • asyncData: 用于在组件初始化前异步获取数据。这个方法在服务端渲染期间和客户端路由跳转之前均会被调用。

    • fetch: 用于在组件加载前异步获取数据。和asyncData不同的是，fetch方法不会设置组件的数据，而是通过store进行。

    • head: 用于配置页面的头部标签，如title、meta等。可以是一个对象或函数。

    • layout: 指定页面的布局组件，用于包裹页面内容。可以是字符串，也可以是一个函数，返回布局组件的名称。

    • middleware: 指定页面所需的中间件。中间件可以在页面渲染之前执行一些操作，比如权限验证等。

    • transition: 配置页面切换动画，可以是字符串或对象。常见的动画包括fade、slide等。

    • scrollToTop: 指定页面切换时是否滚动到页面顶部，默认为false。

    • validate: 用于校验动态路由参数，返回false时会显示404页面。

    • watchQuery: 监听路由参数的变化，并做出相应的响应。可以是一个数组或对象。

    • transitionMode: 指定页面切换模式，有in-out、out-in和in-out-reverse三种模式。

    • fetchOnServer: 指定是否在服务端获取数据，仅在服务端渲染时有效。

    • key: 用于唯一标识页面组件，通常用于缓存页面组件。

    • components: 定义局部组件，仅在当前页面中可用。

    • computed: 计算属性，用于派生出一些需要动态计算的数据。

    • methods: 定义页面组件中的方法，用于处理一些交互逻辑。

    • middleware: 定义页面组件所需的中间件，用于在页面渲染前执行一些操作，如权限验证等。

  • 布局组件（Layout Components）

布局组件用于定义应用程序的整体布局结构，例如头部、底部和侧边栏等。Nuxt.js 中的布局组件存放在 layouts 目录中。

  • 普通组件（Regular Components）

普通组件是应用程序中的其他可重用组件，用于封装 UI 元素和功能。它们通常存放在 components 目录中。

plugins配置

plugins 配置用于引入并注册插件，插件可以用于扩展和定制应用程序的功能。以下是关于 plugins 配置的详细说明：

  • 配置格式：
    plugins 配置是一个数组，每个元素可以是字符串路径，也可以是对象。如果是字符串路径，它将会被解析为插件的路径；如果是对象，可以包含 src 属性指定插件的路径，以及 ssr 属性指定是否在服务端渲染期间加载该插件。

  • 插件位置：
    插件文件通常存放在项目的 plugins 目录下，可以根据实际需要将插件文件放置在不同的子目录中。

  • 插件的作用：
    插件可以用于在应用程序初始化期间执行一些逻辑，例如注册全局组件、添加 Vue 原型方法、初始化第三方库等。在插件中可以访问到 Vue 实例、Nuxt 上下文对象以及其它一些特定的对象和方法。

  • 服务端渲染与客户端渲染：
    如果插件需要在服务端渲染期间执行一些逻辑，可以将 ssr 属性设置为 true，这样插件将会在服务端渲染期间加载和执行；如果只需要在客户端渲染期间执行逻辑，则可以省略 ssr 属性或将其设置为 false。

  • 插件的执行顺序：
    插件会在 Nuxt.js 应用程序初始化的不同阶段执行，执行顺序是按照数组中的顺序依次执行的。通常情况下，插件会在 Vue 实例创建之前执行，这样插件中的逻辑可以在 Vue 实例创建之前被执行。

  • 插件的返回值：
    如果插件返回一个函数，则该函数会被作为插件的 install 方法，在应用程序初始化时被调用。该函数可以接收 Vue 实例作为参数，并在该实例上注册全局组件、方法等。

自定义插件

1
2
3
4
5
6
7
8
9
10
11
12
// plugins/myPlugin.js

// 自定义插件逻辑
export default function (context, inject) {
  // 添加一个全局方法
  context.$myMethod = () => {
    console.log('This is a custom method!')
  }

  // 可以注入一些实用的库
  inject('moment', require('moment'))
}
1
2
3
4
5
6
7
8
9
// nuxt.config.js

export default {
  // 配置插件
  plugins: [
    // 引入自定义插件
    { src: '~/plugins/myPlugin.js', ssr: false } // 设置 ssr: false 表示只在客户端执行
  ]
}

在这个示例中，myPlugin.js 文件定义了一个自定义插件，其中通过 export default 导出了一个函数，该函数接收两个参数 context 和 inject。在函数中，我们可以执行一些自定义的逻辑，例如添加全局方法或注入实用的库。

modules配置

modules 配置用于添加各种功能和特性，可以通过引入第三方模块或自定义模块来扩展应用程序的功能。以下是关于 modules 配置的详细介绍：

  • 配置格式：
    modules 配置是一个数组，每个元素可以是字符串或对象。如果是字符串，则表示引入的第三方模块的名称；如果是对象，则可以包含 name 属性指定模块的名称，以及其它特定模块所需的选项。

  • 第三方模块：
    Nuxt.js 提供了大量的第三方模块，可以用于添加各种功能和特性。例如，@nuxtjs/axios 模块用于添加 Axios 库的支持，@nuxtjs/auth 模块用于添加认证和授权功能等。

  • 自定义模块：
    除了引入第三方模块，你还可以编写自定义模块来扩展和定制应用程序的功能。自定义模块通常以 JavaScript 模块的形式存在，然后在 modules 配置中引入和注册这些模块。

  • 模块的作用：
    模块可以用于添加路由中间件、配置 Axios、注册全局组件、设置 Vuex Store 等。每个模块可以提供一些特定的功能和选项，通过配置 modules 可以将这些功能集成到 Nuxt.js 应用程序中。

  • 模块的执行顺序：
    模块会在 Nuxt.js 应用程序初始化的不同阶段被加载和执行。通常情况下，模块会在应用程序初始化之前加载，这样模块中的逻辑可以在应用程序初始化时被执行。

  • 模块的选项：
    模块可以提供一些特定的选项，用于配置模块的行为和参数。这些选项可以在模块配置对象中指定，并根据需要进行定制。

自定义模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// myModule.js

// 导出一个函数，用于定义和注册模块
export default function myModule(moduleOptions) {
  // 在这里可以执行一些自定义的逻辑

  // 将模块选项合并到默认选项中
  const options = Object.assign({}, {
    // 默认选项
    message: 'Hello from my custom module!'
  }, moduleOptions)

  // 注册模块
  this.addPlugin({
    src: '~/plugins/myPlugin.js',
    fileName: 'my-plugin.js',
    options: options
  })
}
1
2
3
4
5
6
7
8
// nuxt.config.js
export default {
  // 配置模块
  modules: [
    // 引入自定义模块
    '~/path/to/myModule.js'
  ]
}

在这个示例中，myModule.js 文件定义了一个自定义模块，其中导出了一个函数。在函数内部，我们可以执行一些自定义的逻辑，例如合并选项、注册插件等。这里通过 this.addPlugin() 方法注册了一个插件，可以在模块中注册插件或执行其它操作。

router配置

router 配置用于配置 Vue Router 的选项，包括路由的行为、参数和中间件等。以下是关于 router 配置的详细介绍

  • middleware 中间件：

    • middleware 配置用于指定应用程序的全局中间件，这些中间件会在每个路由跳转之前被调用。
    • 中间件可以用于实现认证、路由守卫、页面加载进度条等功能，也可以是自定义逻辑或插件。

  • base 应用的基础路径：

    • base 配置用于指定应用的基础路径，用于处理应用程序的根目录和路由的对应关系。
    • 默认情况下，base 被设置为应用程序的根目录，如果应用程序部署在子目录下，则需要手动设置 base。

  • extendRoutes 扩展路由配置：

    • extendRoutes 配置用于扩展或修改生成的路由配置，可以对路由进行动态配置或修改。
    • 在 extendRoutes 中可以添加新的路由、修改现有路由的参数等。

  • linkActiveClass 激活链接的 CSS 类名：

    • linkActiveClass 配置用于指定激活链接的 CSS 类名，默认为 ‘nuxt-link-active’。
    • 当链接对应的路由处于激活状态时，该 CSS 类名会被添加到链接上，用于指示当前页面的链接。

  • linkExactActiveClass 精确激活链接的 CSS 类名：

    • linkExactActiveClass 配置用于指定精确激活链接的 CSS 类名，默认为 ‘nuxt-link-exact-active’。
    • 当链接对应的路由处于精确激活状态时，该 CSS 类名会被添加到链接上，用于指示当前精确匹配的页面的链接。

  • scrollBehavior 页面滚动行为：

    • scrollBehavior 配置用于配置页面滚动行为，可以设置页面切换时的滚动位置、滚动动画等。
    • 可以返回一个对象或一个 Promise 对象，用于设置滚动行为的参数。

五、常见问题

asyncData 和 fetch 的区别

  • 调用时机:

    • asyncData: 在组件初始化之前被调用，可以用来获取组件初始化所需的数据。在服务端渲染期间和客户端路由跳转之前都会被调用。

    • fetch: 在组件加载之前被调用，用于在客户端渲染期间获取数据。在服务端渲染期间不会被调用。

  • 数据处理:

    • asyncData: 在服务端渲染时会将获取到的数据直接注入到组件的数据中，因此数据可以直接在模板中使用。

    • fetch: 不会直接将获取到的数据注入到组件中，而是通过 Vuex 的状态管理来管理数据，因此需要手动在组件中处理获取到的数据。

  • 返回值:

    • asyncData: 必须返回一个对象，该对象中的属性会被合并到组件的数据中。

    • fetch: 可以返回 Promise 或使用 async/await，但不会将返回的数据直接注入到组件中，而是通过 Vuex 管理。

  • 数据获取方式:

    • asyncData: 适合获取与路由参数相关的数据，可以在函数参数中接收到 params、query 等路由相关信息。
    • fetch: 适合获取与组件无关的数据，例如在页面渲染之前需要在 Vuex 中获取一些全局数据。

  • 用法:

    • asyncData 使用示例：
    1
    2
    3
    4
    async asyncData({ params }) {
        const data = await fetchData(params.id);
        return { data };
    }
    • fetch 使用示例：
    1
    2
    3
    async fetch() {
        this.data = await fetchData();
    }

static 和 assets 目录的区别

  • assets 目录：

    • assets 目录用于存放项目中需要经过 Webpack 处理的静态资源文件，例如图片、样式表、字体等。
    • 资源文件放置在 assets 目录下会被 Nuxt.js 构建系统处理，并根据需要进行优化和压缩，然后被打包到最终的应用程序中。
    • 通过使用相对路径，可以在 Vue 组件或页面中引用 assets 目录下的资源文件，例如：<img src="~/assets/logo.png">。

  • static 目录：

    • static 目录用于存放不需要经过 Webpack 处理的静态资源文件，这些文件会直接被复制到生成的静态站点或者应用程序的根目录中。
    • 与 assets 目录不同，static 目录下的资源文件不会被 Nuxt.js 构建系统处理或优化，它们会被原封不动地复制到输出目录中。
    • 通常，static 目录适用于存放一些不需要经过预处理或优化的静态文件，例如 favicon.ico、robots.txt 等。

modules 和 plugins 的区别

  • Modules（模块）：

    • Modules 是用于在构建期间扩展 Nuxt.js 应用程序的功能的机制。
    • Modules 可以用来添加各种功能，如路由、HTTP 客户端、Vuex 状态管理等。这些功能可以在整个应用程序中使用。
    • Modules 是在 Nuxt.js 应用程序启动时立即加载和执行的。

  • Plugins（插件）：

    • Plugins 是用于在应用程序运行时修改或扩展 Vue.js 的功能的机制。
    • Plugins 可以用来添加全局函数、过滤器、指令等，并在应用程序初始化期间运行。这些功能可以在任何 Vue 组件中使用。
    • Plugins 是在 Vue.js 实例创建之前执行的，但在应用程序启动之后。
喜欢这篇文章？打赏一下支持一下作者吧！
nuxt
#服务端渲染 #nuxt
【nuxt】nuxt.js攻略
https://www.cccccl.com/20231203/服务端渲染/nuxt.js攻略/
作者
Jeffrey
发布于
2023年12月3日
许可协议