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 APIsetup 语法糖与组合式函数设计模式
🔄
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 APIscript setupVue 2 迁移
Chapter 02
响应式系统深度解析
ref 与 reactive 区别与内部原理(Proxy)、computed、watchEffect/watch、toRef/toRefs
refreactiveProxywatch
Chapter 03
组件设计:Props、Emits 与插槽
defineProps 类型定义、defineEmits、v-model 双向绑定原理、插槽、生命周期钩子
PropsEmitsv-modelSlots
Chapter 04
Vue Router 4 路由管理
路由配置、动态路由、嵌套路由、路由守卫、组合式 API useRouter/useRoute、懒加载
Vue Router 4守卫懒加载
Chapter 05
Pinia 状态管理
Pinia vs Vuex 对比、Store 定义(Options/Setup 两种风格)、state/getters/actions、持久化插件
PiniaStore持久化
Chapter 06
组合式函数 Composables
复用逻辑提取、自定义 composable 模式、VueUse 工具库、useFetch/useLocalStorage
ComposablesVueUse复用逻辑
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、状态水合
SSRSSGISR水合
Chapter 09
UI 组件库:Nuxt UI / Shadcn-vue
Nuxt UI 组件使用、主题定制、Shadcn-vue 安装、Tailwind CSS 集成、暗色模式实现
Nuxt UIShadcn-vueTailwind
Chapter 10
实战:Nuxt 3 全栈应用
整合数据库(Drizzle ORM)、用户认证(nuxt-auth-utils)、文件上传、部署到 Vercel/Netlify
Drizzle ORM认证部署