基础入门.

Vue 3在大多数场景下性能优异，但面对挑战性场景仍需针对性微调。本文从页面加载性能与更新性能两大维度出发，系统梳理Vue 3性能优化的认知框架，详解LCP、INP等核心Web指标，介绍Chrome DevTools、Vue …

Vue 3的更新性能决定了用户交互的流畅度。本文从Props稳定性、v-once指令、v-memo指令和计算属性稳定性四个维度，详解Vue 3更新性能优化的核心策略。通过ListItem组件的Props优化案例、v-once跳过子树更新的机 …

页面加载性能是用户对应用的第一印象。本文从架构选型、包体积Tree-shaking优化和代码分割三大策略入手，详解如何选择SSR/SSG/SPA架构，如何利用构建步骤实现Tree-shaking减小包体积，如何通过动态导入 …

理论结合实战，方能真正掌握性能优化。本文通过一个完整的电商后台管理系统案例，从性能分析、问题定位到优化实施，演示Vue 3全链路性能优化的完整工作流。涵盖Chrome DevTools性能录制与分析、LCP/INP指标优化、路由懒加载与代码 …

通用优化策略能同时改善页面加载和更新性能。本文从大型虚拟列表、浅响应式API和组件抽象精简三个方面，详解Vue 3的通用性能优化方法。通过vue-virtual-scroller实现万级列表DOM降至十位数，利用shallowRef …

本章带你掌握@testing-library/vue的核心用法，理解它"测试越像用户使用软件就越可信"的设计哲学，学会render、getByRole、fireEvent等API，用Stepper组件实战对 …

本章从零开始搭建Cypress E2E测试环境，手把手带你安装Cypress、编写第一个端到端测试用例、理解cy.visit、cy.get、cy.contains等核心命令，学会页面导航、元素交互、表单填写与断言，最后通过Todo应用实战巩 …

本章带你配置Vitest测试覆盖率、设定覆盖率阈值，学会将测试接入GitHub Actions实现CI自动化，用husky和lint-staged在提交前自动跑测试，最终构建从覆盖率到CI的全链路测试守护体系。

本章带你理解Cypress组件测试的运作方式，搞懂浏览器环境与Node环境的本质差异，学会在Cypress中挂载Vue组件、触发原生DOM事件、验证样式渲染，并通过与Vitest组件测试的对比，掌握两种方案的适用场景与切换策略。

从质检员和安全网的比喻入手，聊聊前端项目为什么需要自动化测试，单元测试、组件测试、端到端测试三种类型各自负责什么，以及测试金字塔在 Vue 3 应用里怎么落地。

本章带你搞懂Vue 3组件测试中的白盒与黑盒思维差异，掌握视图测试、交互测试的推荐做法，避开测试私有状态、过度依赖快照等常见陷阱，让你的测试代码既健壮又好维护。

Vue 3项目要写测试，第一步得把测试环境搭起来。本文从Node版本、Vite版本这些前置条件讲起，手把手带你安装vitest、happy-dom和@testing-library/vue，配置vite.config.js …

用同一套工具链的比喻，聊聊 Vitest 这个由 Vite 驱动的测试框架为什么这么快，它和 Jest 到底差在哪，以及在 Vue 3 项目里怎么用最顺手。

本章聚焦Vue 3组合式函数的测试方法，介绍两种测试场景：不依赖组件实例的纯响应式组合式函数可直接调用断言；依赖生命周期或供给注入的组合式函数需借助withSetup辅助函数挂载到宿主组件上下文中。文章通 …

本章带你理解Vue 3端到端测试（E2E）的本质，搞懂它和单元测试、组件测试的边界差异，并从跨浏览器、反馈速度、调试体验等四个维度对比 Cypress 与 Playwright，选出最适合你项目的 E2E 框架。

本章带你进入Vue 3组件测试的世界，对比@vue/test-utils与@testing-library/vue的差异，掌握mount与shallowMount的取舍，学会用find、findAll、trigger、setValue完成挂 …

测试环境搭好了，下一步就是真正写单元测试。本文从单元测试的基本概念讲起，拆解describe、test、expect三要素，详解toBe、toEqual、toContain等常用匹配器，最后用increment函数完整走一遍编写测试用例、运 …

用 router.push/replace/go 在代码里主动跳转，搞懂三种历史模式的区别和服务器配置，为系列收尾。

用 children 配置嵌套路由，让页面像套娃一样分层显示；用 name 给路由取名字，让跳转不再依赖写死的路径。

用 :id 这样的路径参数让一个组件服务无数个 URL，搞懂 route.params 的读取、参数变化的响应、404 兜底路由和高级匹配语法。

从安装到跑通第一个 Vue Router 应用。搞懂 createRouter、RouterView、RouterLink 三件套，理解路由器实例、注册插件、useRouter 和 useRoute 的关系。

不装任何库，用 Vue 的动态组件和 hashchange 事件手写一个能跑的简易路由器。亲手写一遍，你会真正理解路由器在做什么，之后再用 Vue Router 就会非常顺。

从点击一个链接开始，搞清楚服务端路由和客户端路由的区别，理解单页应用为什么需要路由器，为后续使用 Vue Router 打下概念基础。

从一个计数器开始理解 Vue 状态管理的三个基本角色：状态、视图和交互。本文用图解、代码和练习帮小白先把单组件的数据流跑通。

Vue 3工具链的最后部分涵盖代码格式化、SFC自定义块集成和底层编译库。本文详解Vue Official和Prettier的格式化、SFC自定义块（如docs块）怎么 …

Vue 3项目的质量保障离不开TypeScript类型检查、自动化测试和代码规范。本文详解Vue Official扩展的类型检查能力、vue-tsc命令行工具、Cypress和Vitest两种测试方案、以及eslint-plugin-vue …

Vue 3开发推荐用VS Code配合Vue - Official扩展（原Volar），提供语法高亮、TypeScript支持和模板智能提示。本文详解VS Code插件配置、Vetur和Volar的区别、WebStorm支持、以及Vue浏览 …

Vue 3有多种构建文件版本，runtime版本不含编译器体积小，完整版含编译器支持浏览器内模板编译。本文详解无构建步骤时模板怎么编译、runtime和完整版的区别、14kb体积差、默认工具链用哪个版本、以及如何在有构建步骤时仍用浏览器内编 …

Vue 3不用本地装环境也能玩，在线演练场让你浏览器里直接写Vue。本文详解Vue SFC演练场和StackBlitz两种在线环境、create-vue脚手架怎么用、Vite和Vue CLI的区别、以及从Vue CLI迁移到Vite的注意事 …

传统Web开发认为HTML/CSS/JS应该分文件存放，但Vue SFC把它们放一起。本文详解关注点分离的真正含义、为什么组件内聚比文件类型分离更重要、以及不想用SFC时如何通过资源导入获得热更新和预编译功能。