跟前面讲过的中间件、插件比起来，模块可以认为是一组来自第三方的自定义功能的整合，可以大大简化功能扩展和整合工作难度，社区存在大量优秀模块可以使用，我们不需要从零开发常用需求。如果说 Nuxt 是一台机器，那么中间件、插件都只能算是机器内的零件，而模块则是完成特定功能的一个完整部件。显然后者影响面更大，复用性更强，应该说是我们项目开发中的主要扩展手段。

本节将会包括如下内容：

• 查找优秀模块；
• 模块的使用指南；
• 如何开发模块。

# 查找优秀模块

Nuxt 模块可以以 npm 包的形式发布，社区已经建立了一个相当繁荣的模块生态，我们可以通过下面链接访问：nuxt.com/modules

目前社区模块相当丰富：

# 模块分类

可以通过分类过滤模块版本和功能，目前Nuxt3已经是默认分类，另外还有Nuxt2+Bridge或Nuxt2这两种过滤：

还可以根据功能过滤需要的模块，例如下面我选择 UI 过滤出相关模块：

# 使用模块

使用模块分为两步：

1. 安装模块；
2. 引入、配置模块。

# 安装模块

首先安装模块，我们以 Color-Mode 模块为例演示：

sql
复制代码yarn add @nuxtjs/color-mode

# 引入和配置模块

其次引入模块，添加模块到 nuxt.config.ts 文件 modules 选项中，有两种添加方式：

• 字符串：此方式仅引入，不配置。

  • arduino
    复制代码export default defineNuxtConfig({
      modules: ['@nuxtjs/color-mode']
    })
    

    @前端进阶之旅: 代码已经复制到剪贴板

• 数组：此方式在引入模块同时添加行内配置。

  • lua
    复制代码export default defineNuxtConfig({
      modules: [["@nuxtjs/color-mode", { preference: "dark" }]],
    })
    

    @前端进阶之旅: 代码已经复制到剪贴板

• 有的模块还可以通过独立配置项配置：

  • php
    复制代码export default defineNuxtConfig({
      modules