欢迎来到
cmdragon's Blog

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 打下概念基础。