古法编程
Vue 3 / Nuxt 全栈开发
Vue 3.4+ · Nuxt 3.x · Pinia · TypeScript
Vue 3 / Nuxt
全栈开发教程
从 Composition API 到 Nuxt 全栈框架,掌握现代 Vue 生态系统,构建高性能的服务端渲染应用
Vue 3 Composition API
响应式系统
Nuxt 3 SSR/SSG
Pinia 状态管理
TypeScript
Tailwind CSS
10
章节
Vue 3.4+
最新特性
全中文
详细讲解
全栈
实战项目
你将学到什么
⚡
Composition API
setup 语法糖与组合式函数设计模式
🔄
Proxy 响应式系统
ref/reactive 原理与深度响应追踪
🗺️
Vue Router 4
动态路由、守卫与懒加载策略
🍍
Pinia 状态管理
Store 设计、持久化与 DevTools
🌐
Nuxt 3 全栈
SSR/SSG/ISR 渲染模式深度对比
🚀
生产部署
Vercel/Netlify 部署与数据库集成
章节目录
共 10 章,循序渐进从核心概念到全栈实战
Chapter 01
Vue 3 核心理念与 Composition API
Vue 3 vs Vue 2 的根本变化、Composition API 设计动机、setup() 函数、script setup 语法糖
Composition API
script setup
Vue 2 迁移
Chapter 02
响应式系统深度解析
ref 与 reactive 区别与内部原理(Proxy)、computed、watchEffect/watch、toRef/toRefs
ref
reactive
Proxy
watch
Chapter 03
组件设计:Props、Emits 与插槽
defineProps 类型定义、defineEmits、v-model 双向绑定原理、插槽、生命周期钩子
Props
Emits
v-model
Slots
Chapter 04
Vue Router 4 路由管理
路由配置、动态路由、嵌套路由、路由守卫、组合式 API useRouter/useRoute、懒加载
Vue Router 4
守卫
懒加载
Chapter 05
Pinia 状态管理
Pinia vs Vuex 对比、Store 定义(Options/Setup 两种风格)、state/getters/actions、持久化插件
Pinia
Store
持久化
Chapter 06
组合式函数 Composables
复用逻辑提取、自定义 composable 模式、VueUse 工具库、useFetch/useLocalStorage
Composables
VueUse
复用逻辑
Chapter 07
Nuxt 3:全栈 Vue 框架
Nuxt 3 架构、文件系统路由、auto-imports、layouts/pages/components、server/ 目录
Nuxt 3
文件路由
Server API
Chapter 08
Nuxt 数据获取与渲染模式
useFetch/useAsyncData、SSR/SSG/ISR/CSR 各模式适用场景、$fetch、状态水合
SSR
SSG
ISR
水合
Chapter 09
UI 组件库:Nuxt UI / Shadcn-vue
Nuxt UI 组件使用、主题定制、Shadcn-vue 安装、Tailwind CSS 集成、暗色模式实现
Nuxt UI
Shadcn-vue
Tailwind
Chapter 10
实战:Nuxt 3 全栈应用
整合数据库(Drizzle ORM)、用户认证(nuxt-auth-utils)、文件上传、部署到 Vercel/Netlify
Drizzle ORM
认证
部署