前端开发
Jenkins结合Docker与Nginx部署Vue前端项目实战

本文详细记录了使用Jenkins、Docker、Nginx和Node.js构建Vue前端项目持续集成与部署环境的具体步骤。内容涵盖从Jenkins自由风格Job配置、Node.js工具设置,到Shell脚本执行构建、Dockerfile编写及Nginx配置文件调整的全过程。通过实际案例展示了如何在单服务器环境下完成从代码拉取、编译打包到镜像构建与容器启动的完整流程,并简要提及了涉及Harbor仓库的多节点部署方案。

2026-10-25 10:18:29
208
望舒
Vue3 结合 TypeScript 项目搭建与最佳实践指南

本文详解 Vue3 结合 TypeScript 的项目搭建流程,对比 Vite 与 vue-cli 两种构建工具。深入解析 Option API 与 Composition API 下的类型声明技巧,涵盖 ref、reactive 及自定义 Hooks 的类型定义。同时提供避免 AnyScript 的建议及 Vetur 工具配置,助力构建类型安全的大型 Vue3 应用。

2026-10-25 09:42:21
252
青山有信
Next.js 项目完整封装:从 SSR 配置到 Redux-Saga 实战

本文详细介绍 Next.js 项目的完整封装搭建流程,涵盖 Sass 样式、Axios 拦截器、Redux-Saga 中间件及模块化 Action/Reducer 配置。通过对比 SSR 与 CSR 效果,并提供 getServerSideProps、useEffect 异步请求等具体代码示例,帮助开发者快速构建支持 SEO 优化的生产级 Next.js 应用。

2026-10-25 09:38:00
376
组件日常
Vue移动端Vant组件库Tag标签使用详解与常见坑点

本文详细介绍Vue移动端项目中Vant组件库Tag标签的使用。涵盖基础用法、空心样式及图标嵌入,重点讲解如何通过三元表达式结合active状态实现动态分类选择,并指出类名未加引号导致样式失效的常见错误,帮助开发者避坑。

2026-10-25 09:35:51
299
青山有信
前端React Nextjs中的TS类型过滤实用技巧

本文深入解析TypeScript中利用Pick、keyof及条件类型实现类型过滤的高级技巧。通过拆解FilterConditionally类型,讲解如何遍历对象属性并筛选指定类型,结合React源码实例,帮助开发者掌握静态类型校验的核心方法,提升代码质量与可维护性。

2026-10-25 09:35:42
142
青柠
TypeScript 高级类型:利用模板字面量与类型守卫处理日期字符串

本文介绍在 TypeScript 中通过模板字面量类型和类型谓词处理自定义日期字符串的方法。利用 TypeScript 4.1 引入的模板字面量特性定义格式,结合用户自定义类型守卫进行运行时验证,并引入名义类型(Branded Types)确保类型安全,从而提升开发体验并减少潜在错误。

2026-10-25 09:34:52
201
拾光
TypeScript 开发中应谨慎使用的四类语法特性解析

本文总结了 TypeScript 开发中建议避免的四种语法:枚举、命名空间、装饰器和 private 关键字。核心原因在于这些特性打破了 TypeScript 作为 JavaScript 类型级扩展的原则,导致编译后的 JavaScript 代码行为改变,进而引发工具链兼容性问题及构建复杂度增加。文章提供了联合类型、ESM 模块和 # 私有字段等更优替代方案,旨在帮助开发者提升代码可维护性与构建效率。

2026-10-25 09:09:09
547
闭包旅人
Vuex Modules 模块化开发详解:命名空间、动态注册与状态管理

本文详解 Vuex 中 Modules 的核心用法,解决大型项目 State 臃肿问题。涵盖模块内部局部状态与全局命名空间的区分,namespaced 命名空间对 getter、action 及 mutation 的影响,以及 createNamespacedHelpers 简化绑定的技巧。同时介绍 store.registerModule 实现模块的动态注册与卸载,帮助开发者构建清晰、可维护的 Vue 状态架构。

2026-10-25 09:02:01
89
模板散步
Vue项目打包JS文件过大的优化方案与实战

本文针对Vue项目打包后JS文件体积过大导致首屏加载缓慢的问题,提供多种优化策略。主要方法包括组件按需加载以减少冗余代码、通过CDN引入第三方库、配置路由懒加载、关闭SourceMap以及启用Gzip压缩。文中详细列出了webpack配置修改、插件安装及Nginx服务器配置的具体步骤,并对比了优化前后的文件大小变化,帮助开发者有效提升项目加载性能。

2026-10-25 08:52:04
615
知秋
TypeScript中实现互斥类型(XOR)的完整指南

本文详解如何在TypeScript中定义互斥类型,确保对象属性中仅有一个存在。通过结合Never类型、Exclude工具类型及泛型,构建通用的XOR类型解决方案,并深入解析其编译期报错原理与测试用例。

2026-10-25 08:44:03
456
纸飞机
TypeScript 使用 Tuple Union 简化函数重载实现

本文介绍如何利用 TypeScript 的 Tuple Union 特性简化函数重载的实现。通过定义参数元组联合类型,自动处理不同签名下的参数提取逻辑,避免手动判断带来的类型关联错误。同时探讨了在需要针对特定属性进行类型收窄时的解决方案,包括使用工具函数辅助判断,确保类型安全与代码简洁性。

2026-10-25 08:39:18
307
闭包旅人
Vue 中使用 vuedraggable 实现列表拖拽排序

本文介绍如何在 Vue 项目中通过 npm 安装并引入 vuedraggable 组件,实现列表项的拖拽排序功能。包含具体的安装命令、引入方式及 Test.vue、main.js 和 app.vue 的核心代码示例,帮助开发者快速掌握该功能的集成方法。

2026-10-25 08:36:22
81
南栀