Vue 专题：从入门到全栈的渐进式框架实践 on PlumePHPhttps://plumephp.com/posts/frontend/vue/Recent content in Vue 专题：从入门到全栈的渐进式框架实践 on PlumePHPHugozh-CNSat, 01 Aug 2026 15:00:00 +0800Vue 性能优化指南：虚拟列表、懒加载、渲染优化与 Core Web Vitalshttps://plumephp.com/vue-performance-optimization/Sat, 01 Aug 2026 15:00:00 +0800https://plumephp.com/vue-performance-optimization/Vue 3 应用性能优化完整策略：虚拟滚动（vue-virtual-scroller）、组件懒加载与异步组件、KeepAlive 缓存、Suspense 异步优化、v-memo 渲染记忆化、响应式性能（shallowRef/toRaw）、Bundle 分析与代码分割、虚拟 DOM 优化、编译时优化、网络优化、性能分析工具、大规模应用架构、以及 Core Web Vitals（LCP/INP/CLS）调优。Nuxt.js 完全指南：Vue 全栈框架的 SSR、SSG、API 路由与部署实践https://plumephp.com/vue-nuxt-guide/Sat, 01 Aug 2026 14:00:00 +0800https://plumephp.com/vue-nuxt-guide/Nuxt.js 3 深度实践：文件系统路由、SSR/SSG/ISR 渲染模式、API 路由（Server Routes）、useFetch/useAsyncData 数据获取、中间件与插件、SEO 与 Meta 管理、Nitro 服务端引擎、自动导入、部署到 Vercel/Netlify/Node.js。Vue 测试深度指南：Vitest + Vue Test Utils + Playwright E2E 与 CI 集成https://plumephp.com/vue-testing-guide/Sat, 01 Aug 2026 13:00:00 +0800https://plumephp.com/vue-testing-guide/Vue 3 应用从单元测试到 E2E 的完整测试策略：Vitest + Vue Test Utils 组件测试（mount/emits/slots/async）、Pinia Store Mocking、MSW API 拦截、Playwright 端到端测试、Cypress 组件测试、覆盖率标准与 GitHub Actions CI 集成。Vue + TypeScript 深度实战：组件类型、Props 泛型、Pinia 类型安全与 API 契约https://plumephp.com/vue-typescript-guide/Sat, 01 Aug 2026 12:00:00 +0800https://plumephp.com/vue-typescript-guide/Vue 3 与 TypeScript 结合的生产级实践：组件 Props 类型标注、defineProps 泛型、 emits 类型、ref/reactive 类型推断、computed 类型、Pinia Store 类型、Vue Router 类型安全、Zod API 数据契约、以及 strict tsconfig 配置。Pinia 状态管理完全指南：Store 设计、持久化、SSR 兼容与生产级实践https://plumephp.com/vue-state-management/Sat, 01 Aug 2026 11:00:00 +0800https://plumephp.com/vue-state-management/Pinia 是 Vue 官方推荐的状态管理库，作为 Vuex 的继任者。本文完整覆盖：Pinia vs Vuex 对比、Store 定义与组织、State/Getter/Action 模式、插件系统、持久化方案、SSR 兼容性、Devtools 调试，以及与 Vue Router 的组合使用。Vue Router 完全指南：v4 路由模式、导航守卫、动态路由、懒加载与生产实践https://plumephp.com/vue-router-guide/Sat, 01 Aug 2026 10:00:00 +0800https://plumephp.com/vue-router-guide/Vue Router 4 深度实践：声明式路由与 Hash/History 模式、嵌套路由、动态路由匹配、导航守卫（全局/路由独享/组件内）、路由元信息、滚动行为、懒加载与代码分割、以及与 Vue 3 Composition API 的结合使用。Vue Composition API 完全指南：setup、ref、reactive、computed、watch、生命周期与自定义 Composablehttps://plumephp.com/vue-composition-api/Sat, 01 Aug 2026 09:00:00 +0800https://plumephp.com/vue-composition-api/Vue 3 Composition API 深度实践：setup 语法糖、ref/reactive 响应式原理、computed 计算属性、watch/watchEffect 侦听器、生命周期钩子、provide/inject 依赖注入、defineProps/defineEmits 组件通信，以及自定义 Composable 的开发与复用模式。Vue 详解：渐进式框架的核心概念与响应式系统https://plumephp.com/vue/Sat, 01 Aug 2026 08:00:00 +0800https://plumephp.com/vue/Vue.js 是渐进式 JavaScript 框架，以声明式渲染、响应式系统和组件化架构著称。本文系统讲解 Vue 3 的核心概念：Options API vs Composition API、响应式原理（Proxy + ref/reactive）、模板语法、计算属性与侦听器、生命周期、Teleport/Suspense、以及 Vue 与 React/Angular 的对比选型。