3. 第三方库选型
1. 组合式工具
1.1 时间和日期处理
请全面使用使用 Dayjs 的 Nuxt 版本 Dayjs Nuxt。
pnpm i -D dayjs-nuxt添加 modules: ['dayjs-nuxt']，见 文档
1.2 Lodash 工具
pnpm i -D nuxt-lodash添加 modules: ['nuxt-lodash']，见 文档。
2. Pinia 状态管理
3. 图标库
3.1 推荐图标库
Nuxt3 官方集成了 Iconify，图标库 Nuxt Icon 支持 100,000+ 图标，包含各种风格，几乎涵盖了所有图标需求。
pnpm i -D nuxt-icon添加 modules: ['nuxt-icon']，见 文档。
3.2 自定义 SVG 图标库
自定义图标库 Nuxt Icons，适合项目需要自定义 SVG 图标时使用。
pnpm i -D nuxt-icons添加 modules: ['nuxt-icons']，见 文档。
4. UI 库
4.1 响应式的颜色模式
Nuxt Color Mode 能响应式地处理颜色模式，支持自定义颜色模式，响应系统主题变化等。
pnpm i -D @nuxtjs/color-mode添加 modules: ['@nuxtjs/color-mode']，见 文档。
可以和 Tailwind CSS 配合使用，包括 Tailwind CSS 插件。
5. CSS 库
5.1 Tailwind CSS
推荐使用 Tailwind CSS，Nuxt 插件 Nuxt Tailwind。
pnpm i -D @nuxtjs/tailwindcss添加 modules: ['@nuxtjs/tailwindcss']，见 文档。
创建 tailwind.config.ts 文件，示例如下：
import type { Config } from 'tailwindcss'
export default {
content: [
'./components/*.{html,js,ts,vue}',
'./layouts/*.{html,js,ts,vue}',
'./pages/*.{html,js,ts,vue}',
'./app.vue',
],
} satisfies Config建议安装 VS Code 插件 Tailwind CSS IntelliSense 获得语法高亮和智能提示。
建议配置 ESLint 插件 eslint-plugin-tailwindcss。
pnpm add -D eslint-plugin-tailwindcss目前，Tailwind CSS ESLint 插件不支持 Flat 格式，请安装 @eslint/eslintrc 来支持 Flat 格式。
// eslint.config.js
import { FlatCompat } from '@eslint/eslintrc'
const compat = new FlatCompat()
export default [
...compat.config({
extends: ['plugin:tailwindcss/recommended'],
rules: {
},
})
]5.2 UnoCSS
UnoCSS 是一个零配置的 CSS 框架，兼容 Tailwind CSS，支持自动提取和优化 CSS，支持自定义预设，支持自定义配置。注意，UnoCSS 不支持 Tailwind CSS 插件。
pnpm add -D @unocss/nuxt @unocss/preset-uno添加 modules: ['@unocss/nuxt']，见 文档。
其中 @unocss/preset-uno 是标准预设，如果需要其他预设参见下方的 UnoCSS 预设。
添加 uno.config.ts 文件：
// uno.config.ts
import { defineConfig } from 'unocss'
export default defineConfig({
// ...UnoCSS options
})建议安装 VS Code 插件 UnoCSS 获得语法高亮和智能提示。
安装 @unocss/eslint-config 来获取 ESLint 配置，详细信息：
pnpm add -D @unocss/eslint-config在 eslint.config.js 中添加如下内容：
// eslint.config.js
import unocss from '@unocss/eslint-config/flat'
export default [
unocss,
// other configs
]UnoCSS 预设
其他常见 UnoCSS 预设：
# 支持属性模式（Attributify Mode）预设
pnpm add -D @unocss/preset-attributify
# Icon
pnpm add -D @unocss/preset-icons
# 排版预设
pnpm add -D @unocss/preset-typography
# 网络字体预设
pnpm add -D @unocss/preset-web-fonts
# TailwindCSS / WindiCSS 预设
pnpm add -D @unocss/preset-wind
# 最小预设
pnpm add -D @unocss/preset-mini
# 标签化预设
pnpm add -D @unocss/preset-tagify
# rem 到 px 单位转换预设
pnpm add -D @unocss/preset-rem-to-px
# 支持变量组
pnpm add -D @unocss/transformer-variant-group
# 支持指令
pnpm add -D @unocss/transformer-directives
# 支持混淆类名
pnpm add -D @unocss/transformer-compile-class
# JSX 标签化
pnpm add -D @unocss/transformer-attributify-jsx
# 编译 Pug 模板
pnpm add -D @unocss/extractor-pug
# 编译 MDC（如 *.md、*.mdc 和 *.markdown 文件）
pnpm add -D @unocss/extractor-mdc
# 支持 Svelte 语法
pnpm add -D @unocss/extractor-svelte更多社区预设参见 官方文档。
6. SEO
6.1 Nuxt SEO
Nuxt SEO 库集成了各种 SEO 需求，包括 Sitemap、Robots.txt、Schema.org、Open Graph、元标签优化、链接检查等。
pnpm i -D @nuxtjs/seo添加 modules: ['@nuxtjs/seo']，见 文档。
6.2 JSON-LD
JSON-LD 是一种标准化 JSON 方法，用于在网页上添加结构化数据，以便搜索引擎更好地理解网页内容。
pnpm i -D nuxt-jsonld添加 modules: ['nuxt-jsonld']，见 文档。
7. PWA
Vite PWA Nuxt 提供了一种让 Nuxt 快速的 PWA 的方法。
pnpm i -D @vite-pwa/nuxt添加 modules: ['@vite-pwa/nuxt']，见 文档。