xiaofeichaichai-优快云博客

原创 NestJS 实战：团队上下文、RBAC 与权限码校验

本文结合真实多团队 CRM 项目，讲解 TeamGuard、PermissionGuard、自定义权限装饰器、角色权限与用户直授权限、管理员和团队创建者、权限码层级、数据范围、权限缓存与审计日志的完整授权链路。

2026-07-17 16:17:01 300

原创 NestJS 实战：JWT 登录认证、Token 刷新与安全退出

本文结合真实 NestJS CRM / SaaS 项目，完整梳理手机号或邮箱登录、密码哈希校验、登录失败锁定、Access Token 与 Refresh Token、Redis 单次轮换、JWT Strategy、双系统密钥和退出登录黑名单等认证实践。

2026-07-17 16:15:14 629

原创 NestJS 实战：基于 TypeORM 的客户 CRUD、分页与筛选

本文结合真实 NestJS CRM 项目的 customer 模块，完整梳理客户 CRUD、DTO 参数校验、TypeORM Repository、QueryBuilder、分页筛选、团队数据隔离、软删除和事务设计，帮助你搭建可迁移的中后台业务模块。

2026-07-16 11:54:23 483

原创 NestJS 实战：TypeORM、MySQL 与数据库模块设计

本文结合真实 NestJS CRM / SaaS 项目，梳理 TypeORM、MySQL、DatabaseModule、Entity、Repository、QueryBuilder 和 Migration 的职责与协作方式，重点讲解分页筛选、参数绑定、数据库安全和生产环境迁移实践。

2026-07-16 11:49:57 501

原创 NestJS 实战：全局 Pipe、Guard、Interceptor 与异常处理链路

本文结合真实 CRM / SaaS NestJS 项目，拆解 main.ts 中的全局 Pipe、Guard、Interceptor 和 Exception Filter，讲清参数转换、DTO 校验、JWT 认证、权限判断、统一响应与异常处理的完整请求链路，并通过客户列表接口说明各层职责。

2026-07-15 15:43:34 426

原创 NestJS 实战：从 main.ts 到业务模块，梳理真实项目整体架构

本文结合真实 CRM / SaaS NestJS 项目，梳理从 main.ts、AppModule 到 common、database、crm、saas 业务模块的整体架构，重点讲解全局 Pipe、Guard、Interceptor、Filter、JWT 权限和 TypeORM 请求链路，帮助读者建立阅读和维护 NestJS 项目的方法。

2026-07-15 15:13:57 295

原创动态路由与按钮权限

本篇围绕 Vue 3 中后台项目的权限链路展开，从页面、菜单、按钮三层权限出发，讲解动态路由过滤、router.addRoute 注入、刷新恢复、菜单映射，以及 hasAuth 与 v-permission 的选型，并明确前端权限与后端安全校验的边界。

2026-07-14 11:48:27 288

很多人学完 Vue 3、Pinia、Vue Router、axios 封装后，单个知识点都懂，但一进中后台项目还是会迷路：页面代码放哪、路由模块在哪拆、接口文件怎么找、公共组件和业务组件该怎么分。本篇聚焦中后台 Vue 3 项目的基础架构与目录规范一个中后台项目最常见的目录划分方式Layout、路由模块、请求层应该如何协作新人接手项目时，怎样最快定位到页面代码核心原则：中后台架构首先要解决“好找、好改、好扩展”目录主线views/api/按业务域拆，hooks/stores/按能力拆。

2026-07-14 11:11:49 333

原创构建优化与部署

本文围绕 Vite 项目的生产构建与上线流程展开，系统讲解了 build 配置、 manualChunks 分包策略、首屏体积排查、gzip 与 brotli 压缩、 vite preview 本地验包，以及 Nginx 静态部署和 History 路由回退配置。通过一条完整的构建到发布链路，帮助你理解前端工程优化不只是“调配置”，更是资源体积、缓存策略、部署稳定性和 CI 流程的整体协同。

2026-07-09 17:46:18 436

原创插件体系与常用插件

本文围绕 Vite 的插件体系展开，系统讲解了 Vite 插件与 Rollup 插件的关系，以及 resolveId 、 load 、 transform 、 transformIndexHtml 、 configureServer 等常见钩子的职责。结合 Vue 项目里常用的官方与社区插件、自定义插件示例和自动导入原理，帮助你理解插件到底能做什么，以及在实际工程里该如何合理使用。

2026-07-08 17:48:46 425

原创 Vite配置实战

本文围绕 Vite 项目里的常见配置展开，系统讲解了 vite.config.ts 的组织方式，以及别名、开发代理、环境变量、 base 公共路径和 CSS 配置的实际写法。通过一套可直接复用的配置示例，帮助你理解这些配置各自解决什么问题，以及在多环境开发、接口联调和项目部署中最容易踩到哪些坑。

2026-07-08 17:47:29 574

原创 Vite原理与Webpack对比

本文围绕 Vite 与 Webpack 的核心差异展开，重点说明 Vite 在开发环境下为何能依靠原生 ESM、按需编译和依赖预构建获得更快的启动与 HMR 体验，同时解释其生产环境仍使用 Rollup 打包的原因。文章也对比了两者在配置思路、适用场景和工程价值上的区别，帮助你建立更清晰的选型判断。

2026-07-07 17:02:21 284

原创 API层类型与TS常见踩坑

本文聚焦Vue3项目API层TS开发高频痛点，讲解接口类型规范化搭建方案。详细介绍统一响应体、Axios泛型封装、unknown安全收窄等实战用法，厘清null、可选字段、类型断言的使用误区，提供新旧代码混用的渐进治理方案，汇总常见报错与面试考点，帮助开发者搭建安全、规范、可维护的接口类型体系。

2026-07-07 16:54:17 540

原创 Composables 与 Pinia 类型

Composable 与 Pinia 的 TypeScript 类型设计。文章涵盖 composable 返回值显式声明与 ReturnType、Pinia Options/Setup Store 写法、actions 参数类型，以及 storeToRefs 只转换 state/getters 为 Ref、actions 需从 store 实例解构。重点说明 storeToRefs 不含 actions，以及 declare module 为无类型第三方库补声明。

2026-07-03 09:58:46 404

原创泛型与工具类型在 Vue 中的应用

聚焦 Vue 3 项目中的泛型实战。文章涵盖 composable 泛型（useFetch、usePagination）、ApiResponse/PageResult 统一接口类型，以及 Partial/Pick/Omit/Record/ReturnType 在编辑表单、表格列、状态映射中的用法，并介绍 TableColumn<Row> 与 generic 组件。重点说明泛型 T 用 extends 约束的场景，以及手写 Partial、Pick 的思路。

2026-07-03 09:57:43 521

原创组件类型-Props-Emits-Ref

TS + Vue 3 系列开篇，介绍 Vue 3 项目使用 TypeScript 的原因，以及基础类型、类型推断与联合类型、any/unknown/never 的区别。文章涵盖 Vue + Vite 的 tsconfig 核心配置、路径别名与 env.d.ts，以及 Volar 与 vue-tsc 的分工。重点说明 strict 建议开启、paths 需与 vite alias 对齐，以及 vite build 不自带类型检查。

2026-07-02 17:17:02 415

原创 TS 快速入门与 Vue 项目配置

TS + Vue 3 系列开篇，介绍 Vue 3 项目使用 TypeScript 的原因，以及基础类型、类型推断与联合类型、any/unknown/never 的区别。文章涵盖 Vue + Vite 的 tsconfig 核心配置、路径别名与 env.d.ts，以及 Volar 与 vue-tsc 的分工。重点说明 strict 建议开启、paths 需与 vite alias 对齐，以及 vite build 不自带类型检查。

2026-07-02 16:43:31 892

原创 Vue 服务端渲染 SSR

SSR 在服务端将 Vue 渲染为 HTML，提升首屏与 SEO，客户端再通过 Hydration 激活为可交互应用。文章涵盖 SSR/CSR/SSG 对比、renderToString 与 Hydration 流程、状态脱水/注水（__INITIAL_STATE__）、Streaming SSR 及 Nuxt 3 简介。重点说明 onMounted 仅在客户端执行、SSR 中不可直接使用 window/document，以及 Hydration 不匹配会导致警告与交互异常。

2026-06-29 11:51:20 407 1

原创 Vue 性能优化策略

从渲染、响应式、代码、测量四个层面梳理 Vue 性能优化。文章涵盖 v-once/v-memo、shallowRef/markRaw、虚拟滚动、路由与组件懒加载及 Tree-shaking，并强调先测量再优化。重点对比 v-memo 与 computed 的分工，以及 shallowRef 仅在 .value 整体替换时触发更新、深层属性变化不会自动更新。

2026-06-29 10:59:37 413

原创 Vue 3 Composition API 深入

从语法与机制层面深入 Composition API。文章涵盖 setup 函数与 script setup 语法糖、编译器宏（defineProps/defineEmits/defineExpose/defineOptions/defineModel）及使用限制，setup 中无 this 的替代方式，以及 reactive/props 解构失去响应性时用 toRefs 解决。重点说明 script setup 顶层自动暴露、编译器宏须在顶层同步调用，以及 getCurrentInstance 仅适合底层

2026-06-28 09:15:00 441

原创 nextTick 原理

Vue 响应式更新是异步批量的，同一事件循环内多次改数据只触发一次 DOM 更新。文章涵盖更新队列机制、nextTick 的三种用法与微任务实现、典型场景（读 DOM 尺寸、聚焦新节点），以及 watch 的 flush 与 Vue 2/Vue 3 差异。重点说明改数据后立即读 DOM 仍是旧值，需 await nextTick() 等待 patch 完成。

2026-06-28 09:00:00 122

原创 Key 的作用与原理

key 是 VNode 的唯一标识，帮助 Diff 判断节点是否复用。文章涵盖 v-for 中 key 的匹配规则、index 作 key 在增删时导致的状态错乱、Math.random() 等不稳定 key 的问题，以及通过改变 key 强制组件重新渲染。重点说明 key 的首要目的是保证 DOM 与组件状态正确复用，而不只是性能优化。

2026-06-27 10:04:07 597

原创编译优化

Vue 3 在编译阶段分析模板，减少运行时 VNode 创建与 Diff 范围。文章涵盖静态提升（HoistStatic）、PatchFlag 动态标记（TEXT/CLASS/STYLE/PROPS 等）、Block Tree 扁平化 dynamicChildren、cacheHandlers 事件缓存，以及 v-once、v-memo 的配合使用。重点说明 Vue 3 更快的原因：静态节点只建一次、Diff 只比动态节点与标记位。

2026-06-27 10:01:18 511

原创虚拟 DOM 与 Diff 算法

虚拟 DOM 用 JavaScript 对象描述 DOM，通过 Diff 找出最小变更并批量更新。文章涵盖 VNode 结构、更新流程、Vue 2 双端 Diff 与 Vue 3 快速 Diff（LIS 优化移动），以及 PatchFlag、Block Tree、静态提升等编译优化概览。重点说明虚拟 DOM 并非总是比直接操作 DOM 更快，其价值在于声明式开发与批量更新。

2026-06-26 09:53:05 306

原创 Template Refs 模板引用

Template Refs 用于在 Composition API 中获取 DOM 元素或子组件实例。文章涵盖 ref 绑定 DOM、挂载前为 null 的注意事项、defineExpose 暴露子组件 API、v-for 中函数 ref 收集及 TypeScript 类型标注。重点说明 script setup 子组件默认不暴露任何内容，父组件 ref 调用需 defineExpose，DOM 操作应在 onMounted 之后进行。

2026-06-26 09:51:34 526

原创 Suspense 异步组件

<Suspense> 是 Vue 3 内置组件，协调异步依赖加载，就绪前显示 fallback。文章涵盖 default/fallback 插槽、async setup 顶层 await、与 defineAsyncComponent 配合、多子组件 fallback 规则及 pending/resolve 事件。重点说明任一 pending 显示 fallback、全部 resolve 才显示 default，以及其实验性 API、生产环境更常用 defineAsyncComponent 或组件内 load

2026-06-25 11:07:19 429

原创 Teleport 传送门

<Teleport> 是 Vue 3 内置组件，将子元素 DOM 传送到指定位置（如 body），突破父容器 overflow、z-index 限制，逻辑仍属原组件。文章涵盖 to 属性与 disabled、Modal/Toast/Loading/Dropdown 典型场景，以及事件冒泡遵循组件树而非 DOM 树。重点说明 SSR 时默认原位渲染、客户端 hydration 后才传送。

2026-06-25 11:00:13 559

原创 Transition 过渡动画

<Transition> 是 Vue 内置组件，用于元素/组件进入离开时的 CSS 过渡动画。文章涵盖六个过渡类名（enter/leave 的 from/active/to）、TransitionGroup 列表增删与 move 重排动画、JavaScript 钩子及路由过渡（mode、key）。重点区分 Transition（单个元素）与 TransitionGroup（多个元素），以及 key 变化触发 enter/leave 动画的机制。

2026-06-24 14:35:42 434

原创 KeepAlive缓存组件

<KeepAlive> 是 Vue 内置组件，用于缓存动态组件实例，切换时不销毁，保留滚动位置、表单输入等状态。文章涵盖基本用法、activated/deactivated 生命周期、include/exclude/max 缓存策略及 LRU 淘汰机制，以及 Tab 切换、列表→详情→返回等典型场景。重点说明 include 匹配组件 name（script setup 需 defineOptions）、缓存会占用内存需合理设置 max。

2026-06-24 14:33:32 472

原创 Vuex与Pinia区别

Vuex 与 Pinia 的全面对比。文章涵盖两者数据流差异（Vuex 经 mutations 改 state，Pinia 无 mutations）、API 与模块化设计对照、Pinia 取代 Vuex 的原因，以及渐进式迁移策略（共存 → 按模块迁移 → 移除 Vuex）。重点说明 Vuex mutations 必须同步是为 DevTools 时间旅行，Pinia 用多 Store 替代单 Store 嵌套 modules。

2026-06-23 17:34:50 476

原创 Pinia

Pinia 是 Vue 3 官方状态管理库，由 state、getters、actions 组成，无 mutations。文章涵盖 Options Store 与 Setup Store 两种写法、storeToRefs 保持响应性、$patch 批量修改与 $subscribe 监听变化、Store 组合与插件持久化，以及登录态、购物车等典型场景。重点说明 Pinia 去掉 mutations 直接在 actions 中改 state，以及 storeToRefs 只解构 state/getters、ac

2026-06-23 17:29:39 498

原创路由懒加载

路由懒加载通过动态 import() 将页面拆成独立 chunk，访问时才加载，减小首屏体积。文章涵盖基本写法与 chunk 机制、Webpack 魔法注释（chunkName / prefetch / preload）、Vite 的 import.meta.glob 批量注册，以及与 defineAsyncComponent 的场景区别。重点对比 prefetch 与 preload 的加载时机，以及懒加载 chunk 首次访问后会被缓存、不会重复请求。

2026-06-22 15:05:06 462

原创路由守卫

路由守卫是 Vue Router 在导航各阶段的拦截机制。文章涵盖全局守卫（beforeEach / afterEach）、路由独享守卫（beforeEnter）、组件内守卫（onBeforeRouteEnter / Update / Leave）及完整导航流程，Vue Router 4 用 return 替代 next() 控制导航，以及登录拦截、离开确认、动态标题等典型场景。重点说明 return false 取消导航、onBeforeRouteEnter 无法访问组件实例。

2026-06-22 11:15:07 355

原创 Vue Router 4 新特性

Vue Router 4 是 Vue 3 官方路由方案。文章涵盖 createRouter 配置、History/Hash 历史模式、useRouter 编程式导航与 useRoute 读取路由信息、route 响应性及解构注意事项，以及动态/嵌套路由与 router-link。重点区分 useRouter 与 useRoute，以及 params/query 的响应性。

2026-06-19 09:15:00 427

原创 Mixins与Composables

Vue 逻辑复用的两种方案对比。文章涵盖 Mixins 的隐式合并机制与命名冲突问题、Composables 的设计原则（use 开头、显式导入、每次调用独立实例）、常见封装（useMouse、useFetch、useLocalStorage、useToggle、usePagination）、Composable 中生命周期钩子的调用规则，以及从 Mixins 迁移到 Composables 的对照思路。重点区分了 Composables（组件级逻辑复用、独立状态）与 Pinia（全局共享状态）的适用场景。

2026-06-19 09:00:00 344

原创自定义指令

自定义指令用于对 DOM 元素做底层操作，适合聚焦、懒加载、权限等横切逻辑。文章涵盖指令钩子（mounted / updated / unmounted）与 binding 对象（value、arg、modifiers、instance）、全局与局部注册方式、以及 v-focus、v-lazy、v-permission、v-debounce、v-click-outside 等常见实现。重点说明了 Vue 3 指令钩子与组件生命周期对齐、无 this 需通过 binding.instance 访问组件实例。

2026-06-18 09:15:00 277

原创动态组件和异步组件

动态组件与异步组件是 Vue 按需渲染与按需加载的核心能力。文章涵盖 <component :is> 动态切换组件（可绑定组件对象、注册名或 HTML 标签）、与 <KeepAlive> 配合保留 Tab 切换状态、defineAsyncComponent 异步加载及 loading/error/timeout 降级配置，以及动态 + 异步组合（Tab 按需加载、弹窗按需加载）。

2026-06-18 09:00:00 346

原创插槽 Slot

插槽是 Vue 的内容分发机制，让父组件向子组件注入自定义内容。文章涵盖默认插槽（<slot> 与后备内容）、具名插槽（name + #header）、作用域插槽（子组件通过 <slot :item="item"> 暴露数据，父组件自定义渲染）、v-slot / # 简写规则，以及卡片、布局、表格、对话框等典型场景。重点说明了插槽内容在父组件作用域编译、作用域插槽数据只读、Vue 3 统一用 v-slot 并移除 slot-scope 等易混淆点。

2026-06-17 11:44:20 360

原创 Props与Emit

Props 和 Emit 是 Vue 父子通信的基础。文章涵盖 defineProps 的多种声明方式（数组、对象、TypeScript）及类型校验与默认值、defineEmits 的事件声明与触发、单向数据流原则（子组件不能直接修改 props）、v-model 与 Props/Emit 的关系（:modelValue + @update:modelValue）、解构 Props 失去响应性的解决方案（toRefs / toRef），以及列表、表单、按钮、分页等常见组件模式。重点说明了 definePro

2026-06-17 09:00:00 611

原创组件通信与注册

Vue 组件化开发中数据与行为如何在组件间传递。文章涵盖 Props/Emit 父子通信与单向数据流、v-model 语法糖本质、provide/inject 跨层级通信及响应式写法、mitt 事件总线（替代 Vue 2 的 $on/$off）、Pinia 全局状态管理的适用场景，以及组件注册方式（全局 vs 局部 vs 异步）及 Tree-shaking 影响。重点给出了通信方式选型：父子用 Props/Emit，跨层级用 provide/inject，无关联组件用 mitt 或 Pinia，全局状态优先

2026-06-16 18:00:14 389

空空如也

空空如也