集成 Pinia 状态管理
安装依赖
pnpm add pinia @pinia/nuxt
bash
配置模块
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
]
})
typescript
创建 Store
// stores/useCounter.ts
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
},
})
typescript
注意：由于集成了
@pinia/nuxt模块，defineStore等 Pinia 函数会自动导入，无需手动 import。也不需要在app.vue中手动挂载 Pinia 实例——模块内部通过依赖注入自动完成。
在页面中使用
<!-- pages/index.vue -->
<script setup>
const store = useCounterStore()
</script>
<template>
<div>
<p>Count: {{ store.count }}</p>
<button @click="store.increment">+1</button>
</div>
</template>
vue
集成 Pinia 持久化插件
将 Store 状态持久化到 LocalStorage，页面刷新后数据不丢失。
安装依赖
pnpm add pinia-plugin-persistedstate
bash
配置模块
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
'pinia-plugin-persistedstate/nuxt',
],
})
typescript
启用持久化
// stores/useCounter.ts
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
},
persist: true, // 启用持久化
})
typescript
设置 persist: true 后，Store 数据会自动通过 LocalStorage 缓存。刷新页面后计数器数据保持不变。不设置 persist 或设为 false，刷新后数据会重置为初始值。
集成 UnoCSS
安装依赖
pnpm add -D unocss @unocss/nuxt iconify-json
bash
配置模块
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@unocss/nuxt'],
css: [
'uno.css/reset/tailwind.css', // 样式重置
],
})
typescript
UnoCSS 配置文件
// uno.config.ts
import { defineConfig, presetIcons, presetUno, presetAttributify } from 'unocss'
export default defineConfig({
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
warn: true,
cdn: 'https://esm.sh/',
autoInstall: true, // 自动安装图标包
}),
],
})
typescript
使用示例
<template>
<button class="px-4 py-2 bg-sky-500 text-white rounded">
<i class="i-mdi-web" /> Click Me
</button>
</template>
vue
集成 SCSS 预处理器
pnpm add -D sass
bash
<style lang="scss" scoped>
$button-width: 120px;
.custom-button {
width: $button-width;
}
</style>
vue
集成 VueUse
pnpm add @vueuse/core @vueuse/nuxt
bash
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vueuse/nuxt'],
})
typescript
集成后，VueUse 的所有组合式函数自动导入，无需手动 import。
集成 PWA
安装与配置
pnpm add @vite-pwa/nuxt
bash
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vite-pwa/nuxt'],
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'My Nuxt App',
short_name: 'NuxtApp',
theme_color: '#ffffff',
icons: [
{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
{ src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
],
},
workbox: {
navigateFallback: '/',
},
},
})
typescript
PWA 资源文件（图标等）放在 public/ 目录中。
验证 PWA
pnpm build
pnpm preview
bash
构建完成后访问应用，在浏览器 DevTools 的 Application 面板中检查：
- Cache Storage：应出现多个 Nuxt 缓存条目
- Service Workers：应显示已注册的 Service Worker
常见问题：构建时报错 "no such file or directory"，通常是因为项目路径包含中文字符或空格。将项目移到纯英文路径下即可解决。
路径别名说明
Nuxt 的路径别名与 Vue 项目有所不同：
| 别名 | 对应路径 | 说明 |
|---|---|---|
~/ 或 @/ | 项目根目录 | 在模板和 JS 中通用 |
#imports | Nuxt 自动生成的类型 | 用于类型导入 |
需同时在 nuxt.config.ts 和 tsconfig.json 中配置别名才能获得完整的 IDE 支持。
自动导入优化
在 nuxt.config.ts 中可以配置额外的自动导入：
// nuxt.config.ts
export default defineNuxtConfig({
imports: {
autoImport: {
imports: ['defineStore'], // 自动导入 defineStore
},
},
})
typescript
Nuxt Server API
Nuxt 内置了基于文件系统的 API 路由，无需额外搭建 Mock Server。
GET 请求
// server/api/hello.get.ts
export default defineEventHandler(() => {
return 'Hello World'
})
typescript
访问 /api/hello 返回 Hello World。
POST 请求
// server/api/hello.post.ts
export default defineEventHandler(async (event) => {
const body = await readBody(event)
return { received: body }
})
typescript
自定义路由
server/routes/mock/hello.ts → /mock/hello
text
文件名即为路由路径，支持 GET / POST 等方法后缀。
集成清单总结
| 技术方案 | Nuxt 模块 | 状态 |
|---|---|---|
| 组件自动导入 | 内置 | 已集成 |
| 文件路由 | 内置 | 已集成 |
| Vue 核心函数自动导入 | 内置 | 已集成 |
| Pinia 状态管理 | @pinia/nuxt | 已集成 |
| Pinia 持久化 | pinia-plugin-persistedstate/nuxt | 已集成 |
| UnoCSS | @unocss/nuxt | 已集成 |
| SCSS | sass（开发依赖） | 已集成 |
| VueUse | @vueuse/nuxt | 已集成 |
| PWA | @vite-pwa/nuxt | 已集成 |
| Markdown | @nuxt/content | 已集成 |
| Mock Server | 内置 Server API | 已集成 |
↑