shawxlee-优快云博客

原创 vue3+elementplus(el-scrollbar)封装组件：无限滚动懒加载列表（滚动条触底时加载更多，兼容选择器下拉选项、多选框列表等）

本文介绍基于 Element Plus 的 el-scrollbar 封装可无限滚动的列表组件 LoadmoreList，支持加载更多、全选/部分选、空状态显示及自定义高度。通过监听滚动到底部自动加载数据，结合 el-checkbox-group 实现多选功能，并提供接口调用与状态管理逻辑，适用于下拉选择器或可勾选列表场景。

2026-10-09 17:33:08 138

原创 vue3+elementplus(el-skeleton)封装组件：响应式缓冲骨架屏加载动画（自动计算行数，平滑过渡效果）

本文介绍如何在Vue3 + Element Plus项目中封装与使用LoadingSkeleton组件。通过el-skeleton实现加载动画，支持延迟渲染、自定义高度与行高，并动态计算行数。组件可全局注册或按需引入，适用于表格等数据加载场景，提升用户体验。完整代码示例包含安装配置、封装、注册及应用流程。

2026-09-24 17:54:01 117

原创 vue3+lodash/debounce封装组件：搜索框输入防抖（等待用户连续输入停止n秒后自动搜索）

本文介绍如何在Vue3项目中集成Lodash实现输入防抖，并结合Element Plus构建可复用的搜索组件。通过npm安装lodash-es，使用debounce函数实现输入延迟触发搜索，封装DebounceSearch组件并全局注册，最终在页面中按需调用，提升用户体验与性能。

2026-09-24 17:06:46 73

原创 vue3+prism封装组件：多语言自动高亮代码块，支持一键复制

本文介绍如何在Vue项目中集成Prism.js实现代码高亮。通过安装prismjs和vue-prism-component，封装可复用的CodeBlock组件，支持语言标识、行号显示与复制功能，并结合Element Plus实现美观的界面。按需引入语言模块与主题，兼容旧浏览器剪贴板操作，最后通过全局注册或按需引入方式在页面中使用，提升代码展示体验。

2026-09-24 15:30:53 170

原创 (Vue3+Router4)vue-router安装配置教程：嵌套路由、动态匹配、导航守卫、外链跳转、登录认证、自动渲染组件、生成导航菜单等

本文介绍了 Vue Router 的完整配置流程：安装 vue-router 依赖配置路由文件结构 index.js 定义基础配置和全局导航守卫（处理 token 认证和路由重定向） modules.js 定义路由模块（支持动态/静态导入、嵌套路由、动态路由匹配和 404 页面）在 main.js 中注册路由在组件中使用路由 App.vue 使用 router-view 渲染路由示例展示了如何结合 ElementPlus 实现菜单导航和面包屑关键特性包括：路

2026-08-13 18:10:11 36

原创 vue3+elementplus+sass/scss安装配置教程：使用svg图标、引入外部字体、定义变量模块、修改组件样式、一键切换主题等

本文详细介绍了在 Vue 3 项目中集成 Element Plus UI 组件库和 Sass/SCSS 预处理器进行样式管理的完整配置流程。内容包括：1) Element Plus 的安装、全局配置及组件使用示例；2) Sass/SCSS 的安装、变量与混合器定义、全局注入及在 Vue 组件中的实际应用；3) 基于 CSS 自定义属性和配置文件实现动态主题切换的方案。通过本文的步骤，开发者可以快速搭建支持主题定制和样式模块化的 Vue 3 前端工程。

2026-08-05 15:30:42 320

原创 vue3+axios挑战最简洁实用的配置封装+接口调用：请求拦截器、响应拦截器、通用请求方法（单个请求/并发请求/下载文件）、统一接口管理

本文介绍了如何在Vue项目中封装axios进行HTTP请求管理。主要内容包括：1）通过npm安装axios；2）在src/api下创建配置文件，完成axios实例的基础配置、请求/响应拦截器设置；3）封装三种常用请求函数：单个请求request()支持GET/POST等方法，并发请求requestAll()处理多个并行请求，下载请求download()专用于文件下载。每个函数都支持自定义成功/最终回调，提供错误处理机制。文中给出了完整的配置代码示例，并附有相关文档链接，帮助开发者快速实现axios的模块化封

2026-07-27 18:51:32 249

原创 vue3实现动态更新favicon、logo、网页标题等资源，解决浏览器缓存问题，打包后可直接修改

本文介绍了动态修改网页资源的方法，无需重新编译即可更新favicon、logo和标题等。关键实现步骤包括：将资源文件放入public目录，通过config.js配置动态数据，在index.html设置默认值，在App.vue中利用时间戳避免缓存并动态更新资源，组件中注入时间戳实现图片更新。该方法支持打包后直接替换资源文件和修改配置文件，便于非技术人员维护。参考文章提供了配置文件的详细实现方案。

2026-07-23 18:21:46 241

原创 vue3在public下封装config.js自定义配置动态数据，可在打包后直接修改，方便后端部署及后续维护

文章摘要：本文介绍了一种前端项目动态配置方案，在打包后仍可修改配置内容而无需重新编译。通过在public目录创建config.js存储配置数据，在index.html中优先加载，并将配置挂载到Vue全局属性。组件中通过this.$config访问，其他配置文件通过window.customConfig获取。该方案适用于API地址、超时时间等需要动态调整的场景，便于后端和维护人员直接修改dist中的配置。

2026-07-22 18:35:20 235

原创一些常用的JavaScript简写技巧

JavaScript（JS）简写技巧是提升代码效率和可读性的重要手段‌，主要包括三元运算符、空值合并运算符、可选链操作符、箭头函数等常用语法简化方式。

2025-06-05 17:34:46 351

原创【学习笔记】JSX语法（.tsx） - 一个 JavaScript 的语法扩展

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

2024-03-26 16:51:23 2259

原创 windows解决nodejs版本冲突：安装版本管理器nvm，可根据不同项目一键切换适配版本

建议安装版本管理器 nvm-windows，再用它来安装 Node.js 和 npm，这样可以根据不同项目的需要在多个 Node.js 版本之间进行切换。安装 nvm 之前建议从操作系统中删除任何现有的 Node.js 或 npm 的安装，包括删除可能保留的任何现有的 nodejs 安装目录（例如 “C:\Program Files\nodejs”）

2024-03-12 15:04:06 1620

原创【解决】Sublime Text找不到Package Control选项，且输入install也不显示Install Package（其中一种情况）

Sublime Text 找不到 Package Control 选项，且输入 install 也不显示 Install Package。

2024-03-11 18:22:28 12079 8

原创【element-ui】输入框组件el-input输入数字/输出Number类型：type=“number“、v-model.number用法

输入框组件el-input输入数字/输出Number类型

2024-02-07 18:10:38 9851

原创 vue-cli引入本地json数据：封装为js文件，无需请求直接读取

【代码】vue-cli引入本地json数据：封装为js文件，无需请求直接读取。

2024-02-06 17:15:39 950

原创利用ES6解构赋值处理对象：提取/删除属性、修改键名/重命名、拷贝对象……

解构赋值的过程：声明变量（新键名）及原键名 → 在对象内搜索原键名 → 提取属性值赋给变量。解构赋值的过程：声明变量（新对象） → 排除已提取的属性 → 将剩余属性拷贝为新对象。解构赋值的过程：声明变量 → 在对象内搜索同名属性 → 提取属性值赋给变量。

2024-02-05 18:07:03 1723 2

原创【学习笔记】数据结构算法文档（类C语言）

1、线性表1.1 线性表的顺序表示和实现1.1.1 线性表的顺序存储表示1.1.2 顺序表中基本操作的实现1.1.2.1 初始化1.1.2.2 取值1.1.2.3 查找1.1.2.4 插入1.1.2.5 删除1.1.2.6 计数1.2 线性表的链式表示和实现1.2.1 单链表的定义和表示★ 关于结点1.2.2 单链表基本操作的实现1.2.2.1 初始化1.2.2.2 取值1.2.2.3 查找1.2.2.4 插入1.2.2.5 删除1.2.2.

2023-10-10 13:07:00 716

原创【数据结构】结点的不同定义形式、访问形式的含义

【数据结构】结点的不同定义形式、访问形式的含义。

2023-09-28 17:20:54 533

原创【学习笔记】C#基础 - 由C/C++衍生出来的面向对象的编程语言

* 变量定义的语法 */// data_type：一个有效的数据类型// variable_list：由一个或多个用逗号分隔的标识符名称组成char c, ch;double d;/* 定义方法的语法 */// Access Specifier：访问修饰符，声明变量或方法对于另一个类的可见性// Return type：方法返回的值的数据类型，若无返回值则类型为 void// Method name：方法名称，标识符唯一，且大小写敏感。

2023-09-14 17:46:02 749

原创【学习笔记】C/C++教程 - 面向对象的程序设计语言

变量的名称必须以A-Z或a-z或开头，大小写敏感。基本变量类型描述char通常是一个字节（八位）, 这是一个整数类型int整型，4 个字节，取值范围 -2147483648 到 2147483647float单精度浮点值，格式：1位符号，8位指数，23位小数double双精度浮点值，格式：1位符号，11位指数，52位小数void表示类型的缺失//定义变量char c, ch;double d;//定义变量并初始化值。

2023-09-13 21:41:58 462

原创【学习笔记】微信小程序开发手册

一、小程序代码组成1、工程目录├── pages //页面目录│ │── index //页面index│ │ ├── index.wxml //页面HTML│ │ ├── index.js //页面脚本│ │ ├── index.json //页面配置（可选）│ │ └── index.wxss //页面CSS（可选）│ └── logs //页面logs│ ├── logs.wxml│ └── logs.j

2023-09-13 21:12:29 1906

原创【学习笔记】Bootstrap4 - 用于HTML、CSS和JS开发的开源工具包

Bootstrap4 布局1、移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签：<!DOCTYPE html><html><head>  <meta charset="utf-8"> <meta name="viewport" content="w

2023-09-13 20:22:08 1040

原创【学习笔记】HTML字符实体|语言代码、JS正则表达式参考手册

2、浏览器会截短 HTML 页面中的连续空格，总是只显示一个，如需在页面中增加空格的数量，您需要使用。3、如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。1、HTML 中的常用字符实体是不间断空格。1、在 HTML 中，某些字符是预留的；，这是因为浏览器会误认为它们是标签；2、在 HTML 中不能使用小于号。实体名称对大小写敏感。

2023-09-13 20:09:22 490

原创【学习笔记】Vue.js - 一个构建数据驱动的web界面的渐进式框架

一、风格指南1、命名格式命名法适用范围camelCase 变量、参数、函数、方法、方法属性、id、空间PascalCase 类、枚举、Vue组件kebab-case html文件、标签、元素属性、选择器underline_case css/scss文件UNDERLINE_CASE 常量、枚举属性_underlinecase 私有成员命名对象建议用词变量（名词短语）、 isName/hasName（布尔值）函数、方法 canName/hasName/isName（布尔值）、getN

2023-09-13 18:44:23 312

原创【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架

Bootstrap CSS一、移动设备优先为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l

2023-09-13 18:31:13 648

原创【学习笔记】jQuery - 快速简洁的JavaScript框架

/*styles：规定产生动画效果的一个或多个 CSS 属性/值*speed 规定动画的速度（毫秒|"slow"|"fast"）*easing 规定在动画的不同点中元素的速度（"swing"|"linear"）*callback animate 函数执行完之后，要执行的函数。

2023-09-13 18:25:12 283

原创【学习笔记】JS 属性|函数|方法|事件|运算符参考手册（JavaScript - 直译式脚本语言）

undefined //一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性- 全局函数。

2023-09-13 18:08:04 268

原创【学习笔记】JS 格式规范参考手册（JavaScript - 直译式脚本语言）

/元素之间用,隔开//Step1：声明变量为数组函数//Step2：索引元素并赋值//数组函数function hello() //Step1：定义函数//Step2：要执行的代码hello();//Step3：调用显示function hello(content) //Step1：定义函数，声明参数（变量）//Step2：要执行的代码hello(100);//Step3：调用、给参数赋值、显示。

2023-09-13 17:06:11 826

原创【学习笔记】CSS 选择器|层叠|媒体查询参考手册（Cascading Style Sheets - 层叠样式表）

*比较方法：**统计每个规则中每种选择器的数量，在对应的特殊性上加成 → 将这些规则的特殊性从左向右依次比较，加成值越大的优先级越高。- 在无法调试的浏览器上快速修复CSS bug，之后再用完整的解决方案替换掉线上的!- 使用Firebug或其他开发者工具进行调试时，可以给已经被覆盖的样式添加!important轻松覆盖默认的样式而不必担心原本的权重。@media查询可以针对不同的屏幕尺寸设置不同的样式，特别用于响应式页面。- 允许用户根据自己的需求添加!/* 所有p元素下的所有后代em元素都变红 */

2023-09-13 16:11:54 272

空空如也

空空如也