Demoncode_y的博客

原创 前端布局入门：flex、grid 及其他常用布局

在前端开发中，页面布局就像建筑的骨架，直接决定了页面的呈现效果和用户体验。无论是简单的文字排版，还是复杂的多模块交互界面，都离不开合适的布局方案。今天，我们就来深入探讨前端领域中常用的 flex 布局、grid 布局，以及其他经典布局方式，帮你轻松搞定页面布局难题。选择建议：​若需实现简单的单行列布局（如导航栏、列表），优先使用 flex 布局，代码更简洁。​若需实现复杂的多行列布局（如卡片矩阵、仪表盘），优先使用 grid 布局，能大幅减少代码量。​。

原创 uni-app学习笔记（二）

uniapp一套代码，多端报错部署，大幅减少跨端开发工作量。

原创 uni-app学习笔记（一）

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

原创 DummyImage：让占位图「说话」的轻量工具 ——UI / 前端必备指南

做 UI 原型时，你是否需要一张标注 “用户头像” 的占位图？写前端调试代码时，是否想让占位图直接显示 “商品封面（300x200）”？比起纯图片占位工具，能自带文字标注的 DummyImage，或许更懂 “需要明确信息的占位场景”。今天就带你吃透这个轻量工具，让占位图不再 “沉默”。DummyImage 是一款专注于 “文字 + 颜色” 的占位图生成工具，核心特点是 “用 URL 参数快速定制带文字的图片”—— 无需注册、无需下载，只要拼接好参数，就能生成标注清晰、颜色可控的占位图。​。

原创 Lorem Picsum：设计师与开发者的「万能占位图神器」

如果你是设计师、前端开发者，或者经常需要撰写图文内容的创作者，一定遇到过这样的痛点：做原型时缺一张临时图片、写博客草稿时需要填充配图位置、测试网页加载时需要不同尺寸的示例图…… 这时，「Lorem Picsum」或许能成为你的高效工具。先回忆一个熟悉的概念：「Lorem Ipsum」—— 那些 “乱码” 一样的拉丁文段落（比如 “Lorem ipsum dolor sit amet, consectetur adipiscing elit”），早已成为设计和开发中填充文本的标准工具。​。

原创 Vue3 + Three.js 实现 3D 汽车个性化定制及展示

在现代web开发中，3D可视化技术正变得越来越流行，特别是在汽车、房地产等行业。本文将详细介绍如何使用Vue 3和Three.js构建一个交互式3D汽车展示系统，实现汽车模型的360°旋转查看、部位选择、颜色定制和材质切换等功能。这是一个基于Vue 3 Composition API 和 Three.js 开发的3D汽车展示与个性化定制应用，用户可以通过直观的界面浏览3D汽车模型，并对汽车的不同部位进行颜色和材质的个性化定制。3D汽车模型的加载与展示模型的360°旋转、缩放和视角调整。

原创 Vue3中基于路由的动态递归菜单组件实现

在现代Web应用中，动态菜单是提升用户体验的关键功能，尤其在后端管理系统或权限控制场景中。Vue 3结合Vue Router，可以轻松实现根据路由信息动态生成菜单，并通过递归组件封装成可复用的模块。本文将一步步指导你创建这样一个组件：组件外部传入路由信息，组件内部递归调用自身处理嵌套路由。整个过程结构清晰，代码可靠，适用于实际项目。在项目中，路由信息通常在router/routes.js中定义。meta: {title: '登录',},},path: '/',meta: {title: '',

原创 MockJS的局限性及解决方案：如何通过vite-plugin-mock实现请求头拦截

在开发前端应用时，模拟API接口是常见需求。MockJS是一个流行的库，用于拦截和模拟HTTP请求，但它存在一些限制。MockJS在简单场景下高效，但其无法访问请求头限制了动态模拟能力。通过vite-plugin-mock，可以轻松实现基于token的用户信息模拟，提升开发真实性和效率。

原创 我的前端作品集

原创 JavaScript中的属性描述符：深入理解对象属性的控制机制

JavaScript中的属性描述符是一个对象，用于定义或修改对象属性的行为。每个属性都拥有自己的描述符，控制该属性是否可写、可枚举、可配置等特性。value：属性的值，默认为undefinedwritable：布尔值，表示属性值是否可修改enumerable：布尔值，表示属性是否可枚举configurable：布尔值，表示属性描述符是否可更改get：函数，作为属性的getter（读取器），读取属性时执行set：函数，作为属性的setter（设置器），设置属性时执行使用});

原创 深入解析浏览器事件循环：从进程模型到同步异步与任务队列

单线程是异步产生的原因，事件循环是异步的实现方式。

原创 Vue的通用组件通信工具——Vuex和Pinia入门指南

vc.$store.dispatch(‘方法’,参数)：参数传入 actions 对应方法中vc.$store.commit(‘方法’,参数)：参数直接传入 mutations 对应方法中store.actions：用于响应组件中的动作（业务逻辑层）方法名(context,value){context.commit("方法名",value)}//context表示上下文，是处理过的store，有需要的方法，包括commit、dispatch、state等。

原创 VsCode中关于Vue项目代码格式化和eslint规范的配置

ESLint：主要用来检测代码的语法格式，以便我们规范书写，避免因编译所发生的错误。Vetur：针对于vue设计的插件，具有代码高亮、代码片段、代码格式化等功能。Prettier - Code formatter：该插件主要用于格式化代码。如果同一目录下有多个配置文件，ESLint 只会使用一个。vscode 左下角设置-用户-右上角打开设置 (json) -文件，新增针对 script 标签首层缩进报错问题的解决办法。检测规则参考 vue-admin-template 的。或者在项目文件夹下的。

原创 JavaScript模块化学习复习笔记

将程序文件根据一定规则拆分成多个文件拆分出的每个文件就是一个模块，模块中的数据都是私有的，模块之间相互隔离模块内的数据可以暴露出去供其它模块使用JavaScript模块化通过将代码拆分为独立、可复用的单元，显著提升了项目的可维护性和可扩展性。无论是早期的CommonJS，还是现代的ES Modules，模块化方案都在解决代码组织、依赖管理等问题上提供了标准化方案。

原创 Mock.js入门指南：拦截axios请求，生成随机数据，独立开发前端

初学前端做项目时，总要使用各大教学机构的后端接口，一方面，接口有时不稳定，另一方面，接口固定，不能根据自己需求改数据格式，影响前端开发练习，Mock.js提供了拦截axios请求，生成随机数据的功能，可以帮助我们更好地独立开发前端。在开发前端时，后端可能还没有接口，我们可以根据后端的响应 mock 假数据//安装快速体验//引入mock方法})//生成随机数据{data:'xxx',age:xxx,addr:'xxx',email:'xxx'}

原创 TypeScript学习笔记

TS是基于JS的一个扩展语言，是JS的超集，弥补了JS的一些缺陷b站尚硅谷禹神TS教程TS是基于JS的一个扩展语言，是JS的超集，浏览器不能直接运行TS代码，需要编译为JS代码再运行。TS具有静态类型检查，能够在代码运行之前进行检查，发现代码的错误或不合理之处，减少运行时异常出现的几率。TypeScript 作为 JavaScript 的超集，通过静态类型检查、接口、泛型等特性提升了代码的可维护性和可扩展性。

原创 jQuery库学习笔记

jQuery库已经过时，但还没有被淘汰，新手还需要学习，jQuery是我们从原生JS步入JS库的一个过渡，通过学习它，可以帮助我们理解库的作用。参考b站李立超老师JS教学视频jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得简便。

原创 JavaScript 中的 Web APIs —— BOM 和 DOM 学习复习笔记

BOM 和 DOM 复习笔记参考b站李立超老师JS教学视频DOM文档对象模型将网页中的每一部分都转换为了对象，对象之间还有父子、兄弟关系，想要修改页面就先获取DOM对象再操作对象BOM浏览器对象模型，提供可以操作浏览器的对象NodeList。

原创 JavaScript语法学习复习笔记

复习js语法的笔记参考b站李立超老师JS教学视频JavaScript是一种运行在客户端（浏览器）的编程语言，可以实现人机交互效果。由ECMAScript基础语法（俗称的es5、es6）、两种Web API （DOM和BOM）组成。DOM（页面文档对象模型）：操作文档BOM（浏览器对象模型）：操作浏览器JS是弱语言类型，很多规范都不严格JS核心思想是面向对象编程，万物皆是对象。

原创 Node.js版本控制工具 nvm 的使用指南（配合 nrm 快速切换 npm 源）

在现代前端开发中，Node.js 是不可或缺的工具，但不同项目要求的Node版本不同，频繁地安装卸载不同版本Node会很麻烦。nvm（Node Version Manager）和nrm（NPM Registry Manager）是两款高效的开源工具，能帮助开发者轻松解决这些问题。nvm：Node.js 的版本管理工具，用于管理多个 Node.js 版本。它让你在同一台机器上安装、切换和删除不同版本的 Node.js ，避免版本冲突。

原创 高效管理每一天：打造你的专属待办清单todolist

在快节奏的现代生活中，任务堆积如山，时间却总是不够用。你是否经常感到手忙脚乱，忘记重要事项，或是被琐事淹没？一个清晰、灵活的待办清单（Todo List）能帮你摆脱混乱，让目标一目了然，效率倍增。本项目基于 Vue3 + Vite + Element Plus + Pinia + Scss + NanoId 实现。

原创 ＜el-menu＞菜单组件中 router 和 default-active 属性的使用技巧（解决一级路由导航项和二级路由导航项不能同时高亮的问题）

Element Plus提供的<el-menu>菜单组件常用作顶部导航条或侧边导航条，当点击每一个项时，对应导航项就会高亮激活，这很方便，但是，在页面刚加载时，没有导航项被点击，也就没有导航项高亮，这不能满足我们的要求，我们需要有一个导航项默认为高亮激活状态，最好是能和当前路由相关联。总的来说，router开启可以辅助跳转，可以设置默认高亮，两者结合可以帮助我们省些配置路由和样式的功夫，但也产生了一些新的小问题，算是有利有弊吧，大多数人可能还是选择自己配路由。