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

本节将会包括如下内容：

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

# 查找优秀模块

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

目前社区模块相当丰富：

# 模块分类

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

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

# 使用模块

使用模块分为两步：

安装模块；
引入、配置模块。

# 安装模块

首先安装模块，我们以 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: ['@nuxtjs/color-mode'],
  colorMode: {
    preference: "dark"
  }
})

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

# 使用模块特性

下面我们在项目中就可以使用模块提供的各种功能了。例如 Color-Mode 提供的 theme 切换功能，index.vue:

xml
复制代码<template>
  <div>
    <h1>Color mode: {{ $colorMode.value }}</h1>
    <select v-model="$colorMode.preference">
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  </div>
</template>
<script setup>
const colorMode = useColorMode();
console.log(colorMode.preference);
</script>

<style>
body {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.8);
}
.dark-mode body {
  background-color: #091a28;
  color: #ebf4f1;
}
.sepia-mode body {
  background-color: #f1e7d0;
  color: #433422;
}
</style>

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

# 编写模块

如果大家对于编写模块感兴趣，可以使用工具包 @nuxt/kit 并查阅官方提供的模块开发指南：nuxt.com/docs/guide/…

# 总结

模块的相关知识就跟大家介绍完了，可以看到各种项目开发中常见的需求，社区模块几乎都有支持，能够使我们的开发效率倍增。因此，大家如果想在开发中更加得心应手，未来仍需要花一定时间多多探索各种模块。如果确实没有找到合适的模块，还可以尝试开发一个自己的模块并发布到 npm 上造福社区

Nuxt 最强大的扩展方法-模块|Nuxt3专题

Nuxt 最强大的扩展方法-模块|Nuxt3专题