Nuxt.js知识框架

一、Nuxt.js 基础

1. 核心概念

• 基于 Vue.js 的通用应用框架

• 服务端渲染 (SSR) vs 静态站点生成 (SSG)

• 自动化的路由系统

• 约定优于配置的目录结构

• 开发模式 vs 生产模式

2. 项目结构与约定

• 核心目录结构

  • assets/ - 未编译的静态资源

  • components/ - Vue 组件

  • pages/ - 自动生成路由的页面

  • layouts/ - 布局组件

  • middleware/ - 路由中间件

  • plugins/ - 插件

  • static/ - 直接服务的静态文件

  • store/ - Vuex 状态管理

  • nuxt.config.js - 主配置文件

二、渲染模式

1. 不同渲染模式

• 通用渲染 (SSR + 客户端激活)

• 静态站点生成 (SSG/预渲染)

• 单页应用 (SPA) 模式

• 混合模式 (部分页面预渲染)

2. 生命周期

• 服务端生命周期

  • nuxtServerInit

  • middleware

  • validate

  • asyncData

  • fetch

• 客户端生命周期

  • 常规 Vue 生命周期钩子

三、核心功能

1. 路由系统

• 基于 pages/ 目录的自动路由

• 动态路由 (_id.vue)

• 嵌套路由 (目录 + vue 文件同名)

• 路由参数验证

• 自定义路由配置 (router.extendRoutes)

• 路由中间件

2. 数据获取

• asyncData 方法 (SSR)

• fetch 方法 (Vue 2) / useFetch (Vue 3)

• $fetch 辅助方法

• 与 Axios 集成

3. 状态管理

• Vuex 集成 (自动加载 store/ 目录)

• Nuxt 3 的 Composition API 状态管理

• 服务端状态与客户端状态的同步

• 持久化状态

四、高级特性

1. 模块系统

• 官方模块 (Axios, Auth, PWA 等)

• 社区模块

• 自定义模块开发

• 模块的安装与配置

2. 插件系统

• 客户端插件

• 服务端插件

• 同时运行在客户端和服务端的插件

• 注入机制 ($ 前缀)

• 使用第三方 Vue 插件

3. 性能优化

• 自动代码分割

• 预加载与预获取

• 组件级缓存

• 图片优化 (nuxt/image)

• 延迟加载组件 (<client-only>)

五、Nuxt 配置

1. nuxt.config.js

• 构建配置

• 模块配置

• 渲染配置

• 路由配置

• 全局 CSS 配置

• 环境变量配置

• 自定义 webpack 配置

2. 运行时配置

• 公共运行时配置 (publicRuntimeConfig)

• 私有运行时配置 (privateRuntimeConfig)

• 环境变量 (.env 文件)

六、Nuxt 3 新特性 (适用于 Nuxt 3)

1. 架构改进

• 基于 Nitro 服务器引擎

• 基于 Vite 的构建工具

• 更小的 bundle 大小

• 原生支持 Composition API

2. 新功能

• useAsyncData 和 useFetch 组合式函数

• 自动导入 (组件、组合式函数等)

• 新的插件系统

• 更轻量的状态管理方案

• 服务器路由和 API 端点

七、部署与测试

1. 部署选项

• 静态托管 (Netlify, Vercel, GitHub Pages)

• 服务器部署 (Node.js 服务器)

• 无服务器部署 (Lambda, Cloud Functions)

• Docker 容器化部署

2. 测试策略

• 单元测试 (Jest, Vitest)

• 组件测试

• E2E 测试 (Cypress, Playwright)

• 测试工具集成

八、生态系统

1. 官方模块

• @nuxt/content - 内容管理

• @nuxt/image - 图片优化

• @nuxtjs/axios - HTTP 客户端

• @nuxtjs/auth - 认证系统

• @nuxtjs/pwa - PWA 支持

2. 社区资源

• UI 框架集成 (Tailwind, Vuetify, Element UI 等)

• 数据库集成 (Firebase, Supabase 等)

• 图形库集成 (Chart.js, D3 等)

• 动画库集成 (GSAP, Anime.js 等)

九、最佳实践

1. 项目组织

• 大型项目结构

• 组件设计原则

• 代码复用策略

• 目录别名配置

2. 性能优化

• 关键渲染路径优化

• 资源加载策略

• 缓存策略

• 分析工具使用 (Webpack Bundle Analyzer)

3. SEO 优化

• 元标签管理

• 结构化数据

• 站点地图生成

• 社交媒体卡片配置

这个框架涵盖了 Nuxt.js 从基础到高级的主要知识点，适用于 Nuxt 2 和 Nuxt 3 (已标注区别)。学习时可以按照项目需求选择合适的渲染模式，逐步掌握路由、数据获取和状态管理等核心功能，再根据项目复杂度引入模块和插件系统。