u010194271的博客

必须切换淘宝镜像,否则会一直拉取失败。

/ 执行递归删除node_modules文件夹。// 安装 rimraf。

构建（Build）：把你写的“源代码”加工成能运行的“成品”。部署（Deploy）：把这个“成品”放到服务器或应用环境中，让别人能访问或使用。

在多品牌共用代码的工程中，「自动化」不是可选项，而是必须项。这个脚本解决了团队反复手动替换带来的低效与风险，实现了：一键切换 → 安全替换 → 自动备份 → 快速上线未来还可以进一步扩展：环境变量自动同步（.env 文件）Git 自动提交与打 tag自动上传新图片至 CDN想要源码的发私信小工具虽小，但能解决团队中反复出现的痛点问题。自动化不是炫技，而是提升团队协作效率与质量的关键。当你在复制粘贴项目时，请记得：能用代码解决的重复工作，绝不要手动做第二次。

项目模板说明适合场景simple基础骨架，轻量、可定制适合自己搭建业务系统complete全功能后台模板，包含权限、布局、Mock适合学习和快速原型开发通过 @ant-design/pro-cli，你可以在几分钟内搭建一个现代化的中后台管理系统，无需从零配置 Umi、Ant Design、Layout 等依赖。

主应用相当于整个系统的 “操作系统”，统一提供：登录、权限、导航、布局、国际化公共组件、通知、搜索、全局状态异常处理、日志和微应用挂载微应用只专注于 自身业务逻辑，无需重复实现这些系统级功能。

语言本身提供：Array、Object、String、Number、Math、Date、JSON、Promise 等浏览器提供：DOM、BOM、事件、fetch、WebSocket 等Node.js 提供：文件、网络、进程、Buffer 等。

【代码】前端之轮播图代码优化。

样式 → .less / .css / .scss。需要匹配对应的node版本。测试 → .spec.ts。组件逻辑 → .ts。模板 → .html。

组件测试（React Testing Library / Vue Testing Library）前端缓存 / IndexedDB / LocalStorage / Service Worker。SSR / SSG（Next.js / Nuxt3）可选，用于 SEO 和首屏性能。迭代项目：现状分析 → 升级优化 → 新功能开发 → 上线 → 持续优化。React / Vue / Angular（根据团队技术栈选择）新项目：从零搭建 → 开发 → 上线 → 迭代优化。

本文概述前端性能优化策略与实践，包括资源压缩合并、懒加载、JS 执行优化、GPU 动画、缓存策略及网络请求优化，并结合 Chrome DevTools、Lighthouse 等工具分析瓶颈，提升页面加载速度与用户体验。

前端构建工具 → 底层渲染优化 → 项目性能提升

HTML 底层原理就是浏览器将文本文件“翻译”为可视化结构的过程：从 源代码 → 解析为 DOM → 计算样式 → 绘制到屏幕，期间由浏览器的 渲染引擎 完成一系列编译与图形渲染操作。

了解浏览器底层原理，并不是为了背流程图，而是为了在 性能、渲染、兼容、安全、架构 五个维度上能够“从底层找到问题根因”。

问题是：常见的「设计稿适配 → 响应式布局」问题。你这个例子很典型：设计稿 720×1280（即 9:16 比例）在浏览器正常，但手机上错位。

背景图通过 img.bg-image + position:absolute;实现（这是唯一的绝对定位，因为它只是背景层）；用 .content 容器包裹文字与按钮部分，通过 flex-direction: column 实现上下结构；用 justify-content: space-between 让顶部内容（文字）与底部内容（按钮）自动拉开；所有主要内容都用 Flex 布局 + 内边距 padding 来控制，不依赖 top / bottom。

方法特点相对 + 绝对定位精准控制文字位置，适合单行文字Flexbox容易适配多行文字，响应式方便。

绝对定位脱离文档流 → 不再“占据父容器宽度”块级元素默认撑满宽度是针对静态定位（文档流）而言绝对定位需要你指定 width 或 left/right 来控制宽度元素类型默认宽度行为块元素，静态定位自动撑满父容器宽度 (width:auto块元素，绝对定位默认 shrink-to-fit，只包裹内容绝对定位 + left/right撑满 left/right 间距。

文档流是浏览器默认的布局规则：元素按照 HTML 中出现的顺序排列，浏览器自动计算它们的位置、宽高。简单来说，就是 **网页元素在页面上自然“排队”**的方式。文档流就是浏览器默认“排队”规则：块级元素从上到下排列，行内元素从左到右排列，浮动/绝对定位/固定定位等会脱离文档流，用于精细控制布局。理解文档流 → 理解为什么 absolute 脱离流、float 会导致父元素高度塌陷前端布局很多问题都能追根溯源到文档流。

排列、对齐、间距可用 justify-content、align-items、flex-wrap 控制布局。

定位是 CSS 布局的核心之一。控制元素位置、层级、浮动、吸顶、悬浮、弹窗都离不开它。掌握定位 = 掌握网页布局的自由度。决定元素在页面中的位置计算方式。决定 top / right / bottom / left 是否生效。影响是否“脱离文档流”。属性是否脱离文档流相对谁定位是否随滚动移动常见用途relative❌ 否自身原位置✅ 是微调、父参考absolute✅ 是最近定位父元素✅ 是弹窗、提示框fixed✅ 是浏览器窗口❌ 否悬浮按钮sticky❌（部分）

Flexbox 全称是 Flexible Box Layout（弹性盒子布局）。👉 它是一种 一维布局模型，用于在一行或一列上高效地排列、对齐和分配空间。用一句话说：Flexbox 让你可以很轻松地让元素水平垂直居中、自动对齐、按比例分布，而不用写很多复杂的 float、position 或 margin。

JavaScript 引擎，也称为 ECMAScript 引擎，是浏览器用来解释和执行 JavaScript 代码的模块。在网页浏览器中，渲染引擎（也称为布局引擎或页面渲染器）负责解析用户请求的内容（如HTML、XML、图片等）并在浏览器窗口中将其正确展示。渲染引擎是负责取得网页的内容（HTML, XML, 图像等）、整理信息（如加上CSS等），以及计算网页的布局，然后输出到屏幕上。JavaScript 引擎用于解析和执行 JavaScript 代码，以便于浏览器可以处理用户交互、控制DOM和执行动画等。

1、你使用了热更新（如 Capacitor + zip 包方案），App 已经运行到了某个页面（例如支付页、详情页、确认页），这时后台检测到新版本并完成了下载更新，那么：热更新完成后，如果加载新版本，会不会导致页面“跳回首页”？是的，如果你在热更新完成后自动切换到新版，App 会整个重启 WebView（或刷新），自然会回到首页，用户正在进行的操作会全部丢失，这非常不友好。不使用Capacitor，原生端写逻辑，webview加载网页，js交互实现交互。即多个项目放在同一个仓库，用 Yarn 管理依赖。

场景 推荐做法正常用户操作中间 ✅ 继续使用当前旧版本，后台悄悄下载更新下载成功 ✅ 设置本地标志 “新版本就绪”下次启动 ✅ 自动加载新版本想立即让用户更新 ✅ 弹窗提示 “是否现在更新”绝不能刷新页面的业务场景 ❌ 不要强制刷新；除非保存完整中间状态。

Umi 会自动读取项目根目录下的 src/app.ts 或 src/app.tsx 文件，作为全局运行时配置文件，它里面导出的几个函数是 Umi 框架的生命周期钩子。initialState 是 Umi 框架 中 全局初始化状态管理机制，专门用于在应用启动时加载一些“全局共享数据”比如：当前登录用户信息、权限信息、系统配置、国际化语言、Token 等。以下插件在umi中默认生成，也可以开启其它插件。

1、JavaScript 对象的属性顺序规则是：对象属性如果是“数字型键”，在遍历时会按照 数值升序 排列。valueEnum 值 支持 object 和Map，Map 是支持其他基础类型作为 key。2、需要键值对 + 保持顺序，建议用 Map。

Umi MaxUmi Max 和 Ant Design Pro 其实关系很紧密，但用途不同、定位不同。我们一起来搞清楚它们的区别、联系、使用场景👇名称作用Umi Max是现代前端框架，用来构建中后台项目（底层框架）是一个中后台项目的脚手架模版（已经集成了 Umi Max + 组件 + 页面）

暂停web应用，点击Build，生成dist目录，目录下有html。

在 AI 聊天框的左上角，点击 Builder 就可以开启 Builder 模式。用快捷键 command + U 打开侧边聊天框。遇到异常提示，继续问答，修改。

插件地址：https://chromewebstore.google.com/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?

HTML 是构建网页的基础标准，它提供了网页结构和内容的基本定义。HTML5 是 HTML 的最新版本，加入了许多新的功能和元素，如新的语义标签、音视频支持、表单控件、Canvas、Web API、离线支持等，使得开发更为现代化、功能更强大。HTML5 的引入使得网页和应用变得更加丰富，支持多媒体、图形、动画、数据存储等功能，提升了用户体验，并且让开发者能够更方便地构建跨平台的网页和应用。

jsp技术作为曾经一度火爆的技术，在最近几年确实使用率越来越低了，这篇文章带你一块探究一下jsp的从生到死。

【代码】vscode 代码格式setting设置。

相对路径（例如 …/…/…/utils/util）从当前文件的位置计算，适用于大多数项目结构。绝对路径（例如 miniprogram/utils/util）从项目根目录计算，简洁且易于维护，但需要配置支持。在使用绝对路径时，确保你的开发环境或工具支持这种路径映射，否则推荐使用相对路径来确保模块能够正确引入。

使用 === 是一个更安全的做法，因为它不涉及类型转换，可以避免一些由于隐式转换导致的比较错误。在代码中优先使用 === 可以减少潜在的错误和意外行为。

【代码】h5跳转微信小程序。

npm install 失败原本node 的版本号是16.9，就会报以上错误node版本问题了，我切到这个版本，报同样的错。降一下node（14.18）版本就好了具体的方法：（需要在项目根目录下切换）

pnpm、npm、yarn 包管理工具

一、工具HbuilderX 下载地址微信开发者工具 下载地址二、配置正确的微信appid填写正确的appid（已被授权为开发者或者是管理者）三、hbuildx发行 到小程序-微信四、微信开发者工具-上传五、小程序管理后台，设置为体验版...