跟前面讲过的中间件、插件比起来，模块可以认为是一组来自第三方的自定义功能的整合，可以大大简化功能扩展和整合工作难度，社区存在大量优秀模块可以使用，我们不需要从零开发常用需求。如果说 Nuxt 是一台机器，那么中间件、插件都只能算是机器内的零件，而模块则是完成特定功能的一个完整部件。显然后者影响面更大，复用性更强，应该说是我们项目开发中的主要扩展手段。
本节将会包括如下内容：
- 查找优秀模块；
- 模块的使用指南；
- 如何开发模块。
# 查找优秀模块
Nuxt 模块可以以 npm 包的形式发布，社区已经建立了一个相当繁荣的模块生态，我们可以通过下面链接访问：nuxt.com/modules (opens new window)
目前社区模块相当丰富：
# 模块分类
可以通过分类过滤模块版本和功能，目前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/… (opens new window)
# 总结
模块的相关知识就跟大家介绍完了，可以看到各种项目开发中常见的需求，社区模块几乎都有支持，能够使我们的开发效率倍增。因此，大家如果想在开发中更加得心应手，未来仍需要花一定时间多多探索各种模块。如果确实没有找到合适的模块，还可以尝试开发一个自己的模块并发布到 npm 上造福社区
