- 博客(189)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 webpack5 css-loader 配置项中的modules
CSS Modules是Webpack中解决CSS全局污染的关键技术，通过css-loader的modules选项实现。它将类名编译为唯一哈希值（如button__3x7f9），确保样式仅作用于当前模块。配置时可通过localIdentName定制类名格式，使用:global处理全局样式，composes复用样式。适合组件化开发、多人协作等场景，相比CSS-in-JS和BEM更具编译时优势。实践中需注意类名调试、第三方样式处理等问题，与预处理器配合时注意loader顺序。CSS Modules以零运行时成本
2025-06-25 14:54:27
927
原创 webpack5 css-loader：从基础到原理
在前端工程化中，CSS 作为样式层的核心语言，其加载和处理方式对项目的性能和可维护性至关重要。Webpack 作为主流构建工具，通过一系列 loader 实现了 CSS 的模块化处理，其中css-loader是处理 CSS 文件的关键一环。
2025-06-25 14:43:59
1025
原创 Vue 中的作用域插槽：Vue2 与 Vue3 的深度剖析
本文深度剖析了Vue2与Vue3中的作用域插槽特性。作用域插槽允许子组件向父组件传递数据，由父组件决定如何显示。Vue2支持slot-scope和v-slot两种语法，但存在多语法共存问题；Vue3则统一使用v-slot及其缩写#，并优化了数据解构方式。Vue3还结合新响应式系统和Composition API，提升了性能表现和开发体验。文章对比了两版本差异，并列举了表格组件、弹窗等典型应用场景，建议Vue3项目充分利用新特性构建高效组件系统。
2025-06-20 10:30:00
864
原创 Vue 中的具名插槽：Vue2 与 Vue3 的深度解析
本文深入解析了Vue2和Vue3中具名插槽的差异与应用。具名插槽作为Vue组件化开发的核心机制，允许父组件精准控制子组件的内容分发。Vue2支持slot指令和v-slot指令两种写法，而Vue3统一使用v-slot及其缩写#，语法更加简洁。Vue3还通过响应式优化提升了插槽性能，改进了作用域插槽的数据传递方式。对比显示，Vue3在语法统一性、性能表现和开发体验上均有显著提升，更适合新项目开发，而Vue2则更适用于旧项目维护。
2025-06-20 10:00:00
835
原创 Vue中的默认插槽：Vue2与Vue3的对比解析
默认插槽是Vue中最基本的插槽类型，也被称为匿名插槽。当组件模板中只有一个没有名称的插槽时，该插槽就是默认插槽。它的作用是为组件提供一个通用的内容插入位置，允许父组件向子组件传递任意内容，包括HTML标签、文本、其他组件等。默认插槽作为Vue组件化开发的基础特性，在Vue2和Vue3中都扮演着重要角色。虽然Vue3对插槽语法进行了重构，但核心概念和渲染机制保持一致。开发者在使用时应根据项目需求和技术栈选择合适的实现方式，并注意Vue2到Vue3迁移时的语法变化。
2025-06-19 13:00:00
669
原创 Vue 中的 vue-resource：Vue2 与 Vue3 的应用
是 Vue 官方在早期推荐使用的 HTTP 请求插件，它通过将 HTTP 请求功能整合到 Vue 实例中，提供了一套简单易用的 API，方便开发者在 Vue 组件中进行 GET、POST、PUT、DELETE 等常见的 HTTP 请求操作。支持多种数据格式的处理，如 JSON、XML、文本等，并且内置了拦截器、超时处理等功能，能满足项目开发中大部分的 HTTP 请求需求。
2025-06-19 11:15:00
3473
7
原创 Vue动画_从Vue2到Vue3
Vue的动画系统为开发者提供了强大而灵活的工具，无论是简单的过渡效果还是复杂的交互动画，都能轻松实现。Vue3在继承Vue2动画系统的基础上，通过组合式API和性能优化，进一步提升了动画的开发体验和运行效率。简单过渡效果：优先使用CSS过渡和Vue内置的组件复杂动画逻辑：使用JavaScript钩子或结合第三方库性能敏感场景：注意动画属性的选择和优化。
2025-06-18 15:45:00
1960
原创 Vue 中的 $nextTick
Vue中的$nextTick是处理异步DOM更新的关键API。Vue2和Vue3在实现原理上有所不同：Vue2依赖多种异步机制（Promise、MutationObserver、setTimeout等），而Vue3主要使用queueMicrotask和Promise实现。使用场景类似，都用于数据更新后操作DOM，如获取更新后的元素尺寸或实现交互动画。Vue3的性能更优，代码更简洁。开发者应根据不同版本选择合适写法：Vue2使用this.$nextTick()，Vue3通过import引入nextTick函数
2025-06-18 10:00:00
791
原创 Vue 中的配置代理
配置文件不同：Vue2 使用，而 Vue3 在 Vite 构建下使用。语法细节差异：在路径重写等属性的名称和用法上存在一些不同，如 Vue2 的和 Vue3（Vite）的rewrite。构建工具特性影响vue-cli和 Vite 的构建机制不同，导致代理配置在生效速度、热更新等方面存在差异，Vite 在开发体验上更具优势。但无论是 Vue2 还是 Vue3，配置代理的核心目的都是为了解决跨域问题，方便开发者在开发阶段进行接口调试和数据请求。
2025-06-18 08:23:44
884
原创 Vue中的消息订阅与发布
消息订阅与发布模式是一种设计模式，它定义了对象间的一对多依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。发布者（Publisher）：负责发布消息，但不关心谁接收消息订阅者（Subscriber）：订阅感兴趣的消息，并定义处理逻辑消息中心（Event Bus）：作为中介，负责管理订阅关系和消息分发if (!},},特性Vue2Vue3核心实现Vue实例作为事件总线第三方库（如mitt）或自定义生命周期管理。
2025-06-17 14:38:27
1008
原创 Vue 中的全局事件总线：Vue2 与 Vue3 的实现与对比
在 Vue 项目开发过程中，组件间通信是一个绕不开的话题。当涉及到兄弟组件、隔代组件之间的数据传递与事件触发时，全局事件总线（Global Event Bus）就成为了一种高效且常用的解决方案。Vue2 和 Vue3 在实现全局事件总线的方式上既有相似之处，也存在差异，本文将深入探讨这两种版本中全局事件总线的原理、使用方法，并通过实例展示其具体应用。
2025-06-17 06:09:58
1113
原创 openeuler系统每日生成系统运行报告并发送至指定邮箱
在服务器运维领域，及时掌握系统运行状态是保障服务稳定性的基础。传统人工巡检方式不仅效率低下，还容易遗漏潜在风险。本文将详细介绍如何通过Python结合crontab构建自动化系统报告生成与邮件推送机制，实现7×24小时无人值守的系统健康监控，并深入探讨企业级监控体系的进阶优化策略。
2025-06-14 14:37:53
737
原创 openeuler 系统—— 集成大模型分析日志中的错误信息生成故障原因报告
根据RFC 7231，502表示"Bad Gateway"，即网关从上游服务器收到无效响应。
2025-06-14 14:32:27
1060
原创 openeuler 虚拟机：Nginx 日志分析脚本
该脚本的核心目标是从 Nginx 访问日志中挖掘有价值的信息，对访问行为进行分析和监控。统计 TOP 5 访问 IP 和 URL：通过对日志的解析和处理，快速定位访问量最高的 IP 地址和 URL，帮助运维人员了解用户的访问热点，为资源优化和服务改进提供依据。异常高频访问检测：设定每分钟请求阈值，实时检测异常高频访问行为。一旦发现某个 IP 的请求次数超过阈值，即判定为异常访问，触发后续的封禁和告警操作，有效防范恶意攻击和流量滥用。自动封禁异常 IP。
2025-06-13 20:09:15
1218
原创 Nginx 负载均衡、高可用及动静分离
在互联网应用架构不断演进的今天，如何高效地处理大量用户请求、保障服务的稳定性与性能，成为开发者和运维人员面临的关键挑战。Nginx 作为一款高性能的 Web 服务器和反向代理服务器，凭借其出色的负载均衡、高可用性以及动静分离能力，在众多项目中发挥着核心作用。本文将深入探讨 Nginx 在负载均衡、高可用性保障以及动静分离方面的配置与实践，并剖析其背后的原理。
2025-06-13 20:00:53
1136
原创 openEuler虚拟机中容器化部署
在云计算和微服务蓬勃发展的今天，容器化技术凭借其高效、灵活、轻量的特性，成为了应用部署与管理的主流方式。openEuler 作为一款开源、稳定且安全的操作系统，为容器化部署提供了良好的运行环境。在 openEuler 虚拟机中进行容器化部署，不仅能充分发挥容器技术的优势，还能借助 openEuler 的特性保障应用的稳定运行。本文将深入探讨 openEuler 虚拟机中容器化部署的全流程、关键技术点以及优化策略。
2025-06-12 21:22:29
702
原创 openEuler 虚拟机中 Shell 脚本实现自动化备份与清理实践
在数字化时代，数据是企业和个人的核心资产。对于网站运营者来说，确保网站数据与数据库的安全至关重要。在 openEuler 虚拟机环境中，借助 Shell 脚本，我们可以轻松实现每日自动备份网站数据与数据库，并定期清理旧备份，有效节省存储空间，降低数据丢失风险。本文将深入探讨这一自动化备份与清理方案的具体实现与优化。
2025-06-12 21:14:33
1268
原创 Vue实现图像对比组件：打造交互式图片比较工具
摘要 本文介绍了如何使用Vue 3构建交互式图像对比组件。该组件适用于设计对比、产品展示等场景，支持鼠标拖动和触摸操作。核心实现基于clipPath裁剪技术和事件处理逻辑，通过动态计算滑块位置来显示不同图片区域。组件包含响应式设计、平滑动画和自动隐藏的标签功能。文章提供了完整代码示例，包括滑块轨道、手柄和标签的样式与交互逻辑。该解决方案可灵活应用于各类需要图像对比的前端项目中。
2025-06-11 09:43:51
1083
原创 前端实战：用 HTML+JS 打造可拖动图像对比滑块，提升视觉交互体
本文介绍了如何用纯HTML+CSS+JS实现轻量级图像对比滑块组件，无需框架依赖，核心方案包括：1) 语义化HTML分层结构，通过clip-path裁剪实现图像动态分割；2) 纯CSS实现响应式设计与交互动效；3) JavaScript处理鼠标/触摸交互逻辑与性能优化。该组件适用于设计展示、电商产品对比、教育医疗等领域，支持键盘控制和双击复位功能，提供无框架原生解决方案，适配多种项目场景。
2025-06-11 08:15:01
1304
原创 OpenEuler 系统中 WordPress 部署深度指南
本文详细介绍了在OpenEuler系统上搭建WordPress网站的完整流程。首先通过dnf命令更新系统并安装Apache服务器、MySQL数据库和PHP及其扩展。接着创建WordPress数据库和用户，下载并配置WordPress文件到指定目录。最后设置Apache虚拟主机配置并重启服务。整个过程包含了系统环境准备、核心组件安装、数据库设置以及WordPress部署等关键步骤，并提供了所有必要的命令行操作，帮助用户在OpenEuler系统上快速搭建WordPress网站。
2025-06-08 11:07:12
509
原创 OpenEuler服务器警告邮件自动化发送：原理、配置与安全实践
本文介绍了如何配置服务器通过QQ邮箱发送警报邮件。首先需要安装mailx工具，然后编写测试脚本配置QQ邮箱的SMTP参数，包括邮箱地址、授权码和服务器信息。重点说明了如何获取QQ邮箱授权码：登录网页版邮箱，在账户设置中开启IMAP/SMTP服务并通过短信验证来生成16位授权码。最后通过运行测试脚本验证邮件发送功能是否正常。注意授权码需要妥善保管，修改密码会导致授权码失效。
2025-06-08 06:21:56
602
原创 vue 自定义组件的事件绑定
Vue 2 中model: {},methods: {toggle() {使用方式：Vue 3 中（支持多个 v-model）-- 子组件 --> < script setup > defineProps([ 'modelValue' ]) const emit = defineEmits([ 'update:modelValue' ]) function updateValue(val) {
2025-05-30 08:07:58
849
原创 浏览器本地存储
实践建议描述✅ 使用 JSON 存储结构化数据✅ 设置命名空间（如：app_user_token）✅ 页面加载时读取必要状态，如语言、暗黑模式❌ 不存储敏感信息❌ 不依赖 localStorage 实现身份认证（使用 Cookie + HttpOnly 更安全）Cookie 是浏览器存储在用户计算机上的小型文本文件，通常用于：• 保存登录状态• 记录用户行为• 与服务器共享状态信息。
2025-05-29 19:15:00
1357
原创 vue中的 scoped样式
Vue中的scoped样式提供了组件级别的样式隔离机制。通过为DOM元素添加唯一data属性并修改CSS选择器实现作用域限制。本文详细介绍了scoped的基本用法、作用原理，以及深度选择器::v-deep的应用场景。对比了scoped与非scoped样式的差异，并给出使用建议：常规组件推荐使用scoped，公共样式可以全局定义。文中还包含Vue 3的示例，演示了父组件如何穿透子组件样式边界，以及CSS Modules的替代方案。这些技术能有效管理组件样式，避免命名冲突，提升开发效率。
2025-05-29 11:15:00
692
原创 vue 中的ref属性
Vue 中 ref API 在 Vue 2 和 Vue 3 中的核心差异：Vue 2 仅用于 DOM/组件引用（通过 $refs 访问），而 Vue 3 扩展为响应式数据管理工具（需通过 .value 访问）。Vue 3 的 Composition API 引入 ref() 创建响应式变量，支持基础类型数据，与 reactive() 形成互补。对比显示 Vue 3 在类型支持、组合式函数和编程风格上的优势，推荐使用 script setup 语法配合 ref 实现更灵活的响应式编程。
2025-05-28 17:45:00
823
原创 vue中的render函数
摘要：Vue中的render函数是模板的编程式替代方案，通过h(createElement)函数构建虚拟DOM。它支持基础元素渲染、组件使用、条件/列表渲染及插槽功能，比模板更灵活但可读性较差。render函数特别适合动态结构生成、跨组件复用和插件开发场景，可与JSX语法配合使用。与模板相比，render提供更强的灵活性和跨平台支持，但牺牲了部分可读性，开发者应根据项目需求选择合适方案。（149字）
2025-05-28 10:30:00
799
原创 理解vue-cli 中进行构建优化
本文介绍了Vue CLI项目构建优化的多种方法，包括基础优化（生产环境设置、gzip压缩）、代码优化（路由懒加载、CDN引入）、Webpack配置优化（缓存、包分析）和资源优化（图片压缩）。文章提供了详细的配置代码示例，并总结了一个包含8项优化措施的对照表，展示了各项优化方法及其效果。最后给出一个完整的vue.config.js配置示例，涵盖关闭source map、CDN引入、gzip压缩、图片压缩等核心优化功能，为前端性能提升提供了实践指导。
2025-05-27 18:37:51
1010
原创 理解vue-cli中的自定义插件
Vue CLI 插件开发指南摘要： Vue CLI 插件是扩展Vue项目功能的npm包，包含Webpack配置、依赖注入和代码模板。开发时需创建符合规范的目录结构（index.js主入口、generator/template模板文件夹、可选的prompts.js交互文件）。 核心功能通过api对象实现：api.render()注入模板、api.extendPackage()修改依赖、api.chainWebpack()调整配置。插件支持通过prompts.js实现交互式选项，还能添加自定义CLI命令。 发布
2025-05-27 09:43:43
528
原创 理解vue-cli中的webpack
Vue CLI 核心使用指南 Vue CLI 是官方提供的标准化 Vue 项目构建工具，具有开箱即用的 Webpack 配置。核心功能包括： 快速初始化项目结构（vue create） 内置开发服务器和热更新 提供三种 Webpack 配置方式： 基础配置（outputDir等） configureWebpack合并配置 chainWebpack链式精细控制 支持代码分包、懒加载等优化 可通过vue inspect查看完整配置 典型应用场景：快速构建标准化Vue项目，通过vue.config.js定制构建流
2025-05-27 09:36:02
1061
原创 vue实例 与组件实例
本文对比了Vue实例与组件实例的核心区别与联系。Vue实例(new Vue())是应用根节点，而组件实例(Vue.extend())是局部功能单元。两者都通过_init()进行初始化，共享生命周期、响应式系统等特性。Vue 3中两者统一性更强，使用createApp()和函数组件。关键区别在于：Vue实例是唯一入口，组件实例可嵌套复用，具有父子关系。本质上，组件实例是Vue实例的子类实例，实现机制类似但应用场景不同。
2025-05-26 14:02:36
761
原创 Vue中的 VueComponent
Vue组件机制解析 Vue组件本质上是通过Vue.extend()创建的构造函数实例(或Composition API创建)。组件注册分为全局注册和局部注册两种方式，通过props实现父向子传值，通过$emit触发事件实现子向父通信。组件生命周期包含8个核心钩子函数，从创建到销毁的完整周期。在底层实现上，每个组件都是Vue的子类，通过原型继承实现功能扩展。组件渲染过程包括模板编译、生成VNode、DOM挂载等步骤，响应式更新则依赖Observer、Dep和Watcher机制。源码分析揭示了组件从注册、初始化
2025-05-26 09:47:02
957
原创 Vue.extend
摘要： Vue.extend 是 Vue 2 中基于组件配置创建可复用构造函数的 API，常用于动态生成弹窗、消息提示等组件。其核心是通过继承 Vue 构造器生成新构造函数，支持实例化、propsData 传参及手动挂载。但在 Vue 3 中已被移除，推荐使用 defineComponent 和 Composition API 替代。 关键点： 用途：动态组件、插件封装（如弹窗） 原理：继承 Vue 构造器，生成可实例化的子类 注意事项：需手动销毁实例，避免内存泄漏 Vue 3 替代方案：defineCom
2025-05-25 17:14:18
709
原创 vue——v-pre的使用
v-pre 指令详解 v-pre 是 Vue 中的一个指令，用于跳过指定元素及其子元素的编译过程，直接输出原始 HTML 内容。它适用于展示未编译的 Mustache 插值语法（如 {{ xxx }}）或在模板中展示代码示例。使用 v-pre 时，Vue 会忽略该元素内的所有指令和插值表达式，仅保留原始 HTML 结构。例如，<p v-pre>{{ name }}</p> 会直接渲染为 {{ name }}，而不会解析为变量值。 v-pre 的优先级最高，会覆盖其他指令（如 v-if
2025-05-23 16:45:04
788
原创 vue 中的v-once
Vue.js 中的 v-once 指令用于确保元素或组件仅渲染一次，后续数据变化不会影响其内容。它适用于静态内容或首次加载后不需要更新的数据，能够显著提升渲染性能，特别是在包含大量静态内容的场景中。v-once 不仅适用于文本，还可用于组件和 DOM 树。然而，它不适合用于需要响应式更新的数据或交互式组件。在 Vue 2 和 Vue 3 中，v-once 的语法和核心功能一致，但 Vue 3 通过自动静态提升进一步优化了性能，减少了对 v-once 的依赖。总体而言，v-once 是优化静态内容的有效工具，
2025-05-23 16:38:40
867
原创 vue中v-clock指令
v-cloak 是 Vue.js 中的一个指令，用于防止在 Vue 实例挂载完成前，用户看到模板中的插值语法（如 {{ message }}）闪烁。通过在元素上添加 v-cloak 并结合 CSS 隐藏该元素，Vue 在挂载完成后会自动移除 v-cloak 属性，从而避免模板闪烁。v-cloak 在 Vue 2 和 Vue 3 中的行为基本一致，但 Vue 3 提供了更现代的替代方案，如 <Suspense> 组件和组合式 API，用于更精细地控制异步加载和初始化状态。对于简单页面，v-cloa
2025-05-23 16:22:46
1174
原创 vue2 中的过滤器以及vue3中的替换方案
Vue 2 中的过滤器是一种用于模板中数据格式化的语法糖，通过纯函数对数据进行处理而不改变原始数据。过滤器可以在全局或局部定义，并通过插值语法使用，支持链式调用。常见的应用场景包括日期格式化、金额处理和首字母大写等。然而，过滤器存在一些局限性，如仅能在插值表达式中使用、无法接收多个参数，并且在 Vue 3 中已被废弃。Vue 3 推荐使用计算属性、方法或全局工具函数来替代过滤器功能，以实现更清晰和灵活的模板逻辑。
2025-05-23 09:14:01
549
原创 vue 中 v-model 的使用，包括number、trim、lazy
在 Vue 中，使用 v-model 指令可以方便地收集表单数据，实现双向绑定。通过示例展示了如何收集文本输入框、复选框、单选框和下拉菜单的数据。表单提交时，使用 @submit.prevent 防止页面刷新，并通过 handleSubmit 方法处理数据。v-model 还提供了 .number、.trim 和 .lazy 等修饰符，分别用于将输入值转换为数字、去除首尾空格以及延迟数据更新。这些修饰符可以单独或组合使用，以满足不同的表单处理需求。
2025-05-23 08:59:44
392
原创 vue.js 更新数据时，出现数据更新，界面没有更新的情况【普通对象，不包含数组】
在Vue 2中，直接通过索引修改数组元素（如 this.persons[0] = {...}）不会触发视图更新，因为Vue 2的响应式系统基于 Object.defineProperty，无法直接监听数组索引的变化。为了解决这个问题，可以使用 Vue.set 或 this.$set 方法来确保数据的响应式更新。 在原始代码中，点击按钮时，第一行数据的 name 并未从“张伟”变为“张伟111”，因为直接赋值的方式未触发Vue的响应式机制。修改后的代码使用了 this.$set 方法，确保数组元素的更新能够被
2025-05-17 10:59:40
701
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人