weixin_52185313的博客

本文是一篇面向新手的Nginx入门指南，通过快递柜和门卫的比喻形象解释Nginx作为"请求分发器"的工作原理。文章提供了一份完整可运行的nginx.conf配置示例，包含详细中文注释，重点讲解了前端静态文件处理、API反向代理等核心配置项，特别强调了单页应用路由处理的关键技巧和常见坑点。最后还介绍了使用Let's Encrypt免费证书配置HTTPS的简单方法，并给出了验证配置和排错的实用命令。全文采用通俗易懂的语言，帮助零基础开发者快速理解Nginx的基本使用场景和配置方法。

本文介绍了利用Playwright的Route API拦截和伪造请求的方法，绕过前端直接获取B站搜索JSON数据的技术。相比传统HTML解析方式，该方法具有直接获取JSON、数据完整、字段稳定、速度快等优势。文章详细演示了如何创建本地测试服务器和编写Playwright拦截脚本，并分析了B站搜索API的结构。通过拦截API请求，开发者可以更高效地获取稳定的后端数据，避免前端渲染带来的各种问题，实现3-5倍的性能提升。

JavaScript 作为单线程语言，通过 Event Loop 机制实现异步非阻塞执行。其核心组件包括调用栈、Web APIs 和任务队列（宏任务/微任务）。Event Loop 的工作流程是：执行同步代码→清空微任务队列→UI渲染→执行一个宏任务，循环往复。微任务（如 Promise）优先级高于宏任务（如 setTimeout），且具有"滚雪球"效应。Vue 利用此机制实现高效的 DOM 更新，通过 nextTick 将回调放入微任务队列，确保在 DOM 更新后执行。理解 Event

Vue 3 生命周期完全指南：从流程图到最佳实践 摘要： 本文详细解析Vue 3生命周期流程，包括8个关键阶段：实例创建、setup/beforeCreate、created、模板编译、beforeMount、mounted、更新循环和卸载阶段。重点介绍组合式API的12个生命周期钩子，划分为核心三剑客（onMounted、onUpdated、onUnmounted）、进阶钩子、调试钩子和KeepAlive专属钩子。特别强调常见误区，如在setup()外异步调用钩子的错误做法，并提供正确使用setTimeo

摘要：VeeValidate 表单验证解决方案 本文介绍了 Vue 3 中表单验证的痛点及 VeeValidate 解决方案。传统手动验证方式存在逻辑分散、状态管理困难等问题，而 VeeValidate 通过集成 Yup 验证库提供了更优雅的实现方式。文章对比了两种实现方法，展示了 VeeValidate 的核心优势：与 Composition API 深度集成、自动错误管理、支持异步验证和 TypeScript。最后提供了安装命令，帮助开发者快速集成这一流行表单验证库。

本文介绍了如何封装Axios请求，通过拦截器和错误处理优化API调用。文章首先展示了未封装时重复代码的问题，然后详细讲解了Axios基础用法和响应结构。核心部分演示了如何创建Axios实例，包括统一配置、请求/响应拦截器的实现，以及业务错误和HTTP错误的统一处理。通过这种封装，可以实现token自动添加、错误统一处理、开发日志等功能，使API调用更简洁高效。封装后的代码结构清晰，便于维护，适合中型以上项目使用。

Vue组件通信方案对比与最佳实践 文章分析了Vue组件通信的5种主要方案，重点对比了Props和Emits两种基础方式： Props（父→子） 单向数据流，父组件通过props向子组件传递数据 支持类型声明、可选属性和默认值 子组件不能直接修改props，需通过事件通知父组件 Emits（子→父） 子组件通过emit事件向父组件发送消息 支持类型声明的事件参数 v-model语法糖本质是:prop + @event的组合 文中通过后台管理系统场景和表单组件案例，展示了如何合理选择通信方式。Props适用于数

✅ 现在访问 http://localhost:5173/ 和 http://localhost:5173/about，页面会切换但不刷新！当 URL 变化时（比如用户从 /users/1 跳到 /users/2），route.params.id 会自动更新，模板也会重新渲染。它是 Vue.js 官方的前端路由管理器，与 Vue 核心深度集成，让构建单页面应用（SPA）变得简单。// 读取查询参数 /search?// 读取动态参数 /users/123 → 123。// 获取查询参数?

它是 Vue 3 时代的官方状态管理库，由 Vue 核心团队成员开发，2021 年发布，2022 年被 Vue 官方推荐为 Vuex 的替代品。返回的是一个“对象（Object）”，而你使用的是“对象解构”语法。对象是根据“键名（Key）”来匹配的，而不是根据“位置”或“数量”。对象解构（Destructuring） 的核心机制。Vite 在开发时利用浏览器原生 ES 模块（ESM）能力，实现“按需加载”，无需打包整个应用。没有插件，Vite 只能处理 .js/.ts/.css 等原生浏览器支持的格式。

Vue3核心语法与Composition API深入解析 本文介绍了Vue3的核心语法和Composition API使用要点，包含以下主要内容： 项目环境配置与创建 使用nvm管理Node版本 创建Vue3+TypeScript项目的基本流程 响应式计数器实现 使用ref创建响应式变量 模板自动解包特性 TypeScript类型标注实践 ref与reactive对比 ref包装对象的最佳实践 reactive直接解构的风险 响应式数据管理方案选择指南 TypeScript集成技巧 类型断言处理DOM事件

文章摘要：DOM基础与操作指南 DOM（文档对象模型）是HTML文档在内存中的树形表示，JavaScript通过DOM操作页面内容。核心要点包括： DOM树结构：由元素节点（HTML标签）和文本节点组成，document对象是树的入口。 元素获取方法：推荐使用querySelector和querySelectorAll，支持CSS选择器；传统方法如getElementById性能最优。 节点操作：可创建（createElement）、修改（textContent/innerHTML）、插入（appendCh

本文系统讲解了HTML布局的基础知识和CSS布局技术。首先介绍了文档流的概念，即元素默认的排列方式。然后详细解析了盒模型，说明元素如何被渲染为矩形盒子。接着讲解了display属性如何控制元素在文档流中的行为。第四部分介绍了定位(position)属性，包括五种定位方式及其应用场景。第五部分回顾了传统的浮动(float)布局技术。最后重点讲解了现代Flexbox弹性布局，包括容器和子项的各种属性配置。全文由浅入深，涵盖了从基础到现代的CSS布局核心知识。

Vue Router路由–潘登同学的前端笔记文章目录Vue Router路由--潘登同学的前端笔记安装Vue Router启动Router的基础使用动态匹配路由文件分离路由嵌套编程式导航命名路由命名视图重定向与别名HTML5的History模式报错解决Router进阶路由导航全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程路由原信息路由懒加载安装Vue Router官方文档<!-- 注意：要在cd vue-router-demo下 -->cnpm ins

Vue初始搭建与基础知识–潘登同学的前端笔记文章目录Vue初始搭建与基础知识--潘登同学的前端笔记搭建Vue环境Vue的基础知识模板语法插值指令缩写计算属性和侦听器计算属性计算属性缓存 vs 方法侦听器Class 与 Style 绑定绑定 HTML Class条件渲染`v-if`在 `` 元素上使用 `v-if` 条件渲染分组`v-else-if``v-show``v-if` 与 `v-show`列表渲染用 `v-for` 把一个数组对应为一组元素在 `v-for` 里使用对象数组更新检测在 `` 上使用

Vue组件–潘登同学的前端笔记文章目录Vue组件--潘登同学的前端笔记组件组件基础组件的组织Prop(让组件变得动态)Prop 验证自定义事件插槽动态组件&异步组件动态组件异步组件组件组件基础创建组件(在于APP.vue文件同级目录下的compoents中创建My_components.vue)<!-- vue + 回车 快速生成模板 -->引用组件<!-- 在APP.vue文件中，引入组件 -->import MyComponent from "