Nuxt3_扫盲 入门与原理介绍【学习笔记】
个人
💡 什么是 Nuxt 3？
Nuxt 3 是基于 Vue 3 和 Vite 打造的全栈前端框架，支持：
- 服务端渲染（SSR）
- 静态站点生成（SSG）
- 单页应用（SPA）
- 构建全栈应用（支持 API）
Nuxt 3 是 Vue 的“加强版”，帮你简化项目结构和开发流程。
🔧 核心原理
| 功能 | Nuxt 如何处理 |
|---|---|
| ✅ 页面路由 | 自动根据 pages/ 目录结构生成 |
| ✅ 组件自动引入 | 自动注册 components/ 中的组件 |
| ✅ SSR / SSG / SPA | 内置支持，通过命令或配置切换 |
| ✅ API 接口 | 支持在 server/api/ 写后端逻辑 |
| ✅ 状态管理 | 推荐使用 pinia（Vue 官方状态库） |
| ✅ 构建性能 | 默认使用 Vite（构建快）或切换 Webpack |
| ✅ TypeScript | 原生支持 |
🚀 快速入门
1. 创建项目
npx nuxi init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev
2. 目录结构
my-nuxt-app/
├── pages/ # 页面目录（自动成为路由）
├── components/ # 组件目录（自动引入）
├── layouts/ # 布局页面
├── app.vue # 全局入口文件
├── nuxt.config.ts # 配置文件
├── server/api/ # 后端接口目录（构建全栈）
✏️ 示例代码
页面：pages/index.vue
<template>
<h1>欢迎来到 Nuxt 3</h1>
</template>
访问 http://localhost:3000 查看效果。
API 接口：server/api/hello.ts
export default defineEventHandler(() => {
return { message: '你好 Nuxt API' }
})
接口访问地址：http://localhost:3000/api/hello 返回结果：
{ "message": "你好 Nuxt API" }
客户端调用接口
const { data } = await useFetch('/api/hello')
✅ Nuxt 3 适合人群
- 使用 Vue，但不想手动配置构建、路由、SSR 的开发者
- 希望构建高性能、SEO 友好的网站/应用
- 想一套代码做前端 + 后端 API 的开发者
📚 推荐学习资源
- 中文官网：https://nuxt.com.cn
- 官方文档：https://nuxt.com
- 视频课程：B 站搜索「Nuxt3 入门」