AI 前端-CSDN博客

原创 TypeScript 中 omit 和 record 用法

TypeScript中Omit和Record工具类型可以组合使用实现灵活的类型操作。Record<K,T>创建键为K、值为T的对象类型，Omit<T,K>从T中移除指定键。典型用法是在Record基础上移除特定字段，如API响应脱敏场景：Record<string,Omit<UserMap[string],'password'>>会移除密码字段。该组合适用于状态管理、表单处理等需要过滤属性的场景，注意Omit需要TypeScript 3.5+支持。

2026-05-19 20:46:43 34

原创 TypeScript 中 Partial 和 Pick 用法

TypeScript中的Partial和Pick是常用的工具类型。Partial将类型所有属性变为可选，适用于部分更新场景；Pick从类型中选取指定属性组成新类型，适用于字段筛选场景。两者可组合使用实现精细类型控制，但仅作用于第一层属性。Partial保持属性数量但变为可选，Pick则减少属性数量。前者常用于更新请求，后者多用于安全字段暴露。

2026-05-19 20:44:25 33

原创 rules 和 AGENTS.md 的区别

AI编程辅助工具中，AGENTS.md和rules文件在项目规范传递上各有侧重。AGENTS.md定义AI代理的角色身份和全局行为准则，适用于多智能体协作场景，强调"谁来做、怎么做"；而rules文件（如.cursorrules或.mdc）则聚焦具体编码规范和技术约束，实现条件触发的细粒度控制。二者可形成分层指令体系：AGENTS.md制定宏观原则，rules落实微观规范。当前趋势显示，模块化的.mdc格式正逐步取代传统规则文件，成为2026年主流标准。实践中建议将二者结合使用，AGEN

2026-05-06 15:36:49 258

原创 AI工作流：AGENTS.md/rules/skills/prompt/mcp/subagent 概念解析

摘要：本文通过形象比喻和案例对比了AI系统中的五个核心概念：MCP（"手和眼"）负责外部连接，Rules（"行为准则"）规定全局规范，Skills（"专业教材"）提供特定任务能力，Subagent（"外部专家"）处理复杂子任务，Prompt（"具体指令"）触发单次交互。通过风险评估报告案例展示了它们如何协同工作：用户Prompt触发主Agent，后者通过MCP获取数据，创建Subagent分工处理，调用特定S

2026-05-06 12:29:40 358

原创 Node.js在前端开发中扮演的角色

Node.js在前端开发中扮演着幕后英雄的角色——它不直接参与浏览器中的网页渲染，而是作为开发工具链的核心运行环境，支撑着现代前端工程化的方方面面。理解Node.js与浏览器环境的区别，以及它们如何协同工作，是掌握现代Web开发的关键。Node.js不是前端技术，而是一个JavaScript运行时环境，它让JavaScript能够脱离浏览器，在服务器端或本地环境中执行。Node.js在前端开发和浏览器浏览网页中扮演着构建工具链核心和开发环境支撑的角色，而非直接参与浏览器中的网页渲染或用户交互。

2026-04-26 00:33:34 319

原创详解CSS中的Containing Block：概念、规则与实战解析

CSS包含块（Containing Block）深度解析包含块是CSS中决定元素尺寸和位置的核心概念，它定义了百分比值和定位属性的计算基准。关键要点包括：包含块类型：初始包含块（视口）和元素包含块（由position属性决定）定位规则： static/relative元素：最近块容器的内容区 absolute元素：最近非static祖先的内边距区 fixed元素：视口特殊影响：transform/perspective等属性会创建新包含块常见误区：包含块≠父元素内容区，浏览器对行内元素包含块处理存

2026-04-24 14:59:29 383

原创 Openspec 规范驱动开发工作流-需求文档篇

如何规范编写OpenSpec需求文档摘要：OpenSpec需求文档需要结构化编写以提升AI生成质量。核心要求包括：1)明确产品背景、目标和触发条件；2)详细描述行为规则，采用"当...则..."格式；3)定义非目标和边界条件。文档应包含UI展示内容、可配置项和回退方案等模块，建议采用标准模板组织内容。关键注意事项：穷举所有触发路径、场景化描述规则、明确系统边界。文档越结构化，AI生成的方案/设计/任务说明质量越高，避免过度实现或遗漏异常处理。建议配合设计稿和配置参数说明，完整描述功能需

2026-04-16 21:16:26 195

原创前端开发 Cursor MCP 提效工具配置

摘要：MCP（Model Context Protocol）是由Anthropic开发的开放协议，支持AI应用程序与外部数据源和工具的交互。Cursor集成MCP后，AI助手可获得连接数据库、API、浏览器等外部资源的能力，实现文件操作、数据库查询等扩展功能。配置方法包括手动编辑mcp.json文件或通过Cursor设置界面添加服务。推荐工具包括chrome-devtools-mcp（用于浏览器自动化调试）和figma-mcp（需配置Figma API密钥）。Chrome-devtools-mcp需Node

2025-11-20 20:16:41 1557 3

原创 JS/CSS实现元素样式隔离

文章摘要：实现前端元素样式隔离的主要方法包括：1）Shadow DOM（推荐），提供原生隔离；2）iframe独立文档环境；3）CSS的all:initial属性重置；4）CSS-in-JS生成唯一类名；5）实验性scoped属性。最佳实践首选Shadow DOM，旧浏览器可用iframe或all:initial，组件开发推荐CSS Modules或Shadow DOM。这些方法能有效防止元素样式被外部CSS影响，满足不同场景的隔离需求。

2025-10-22 15:34:38 535

原创 next.js 如何实现动态路由？

在 Next.js 12 中，动态路由和参数传递主要通过文件系统路由（File-system Routing）实现。

2025-04-20 21:58:36 1003

原创 npm 常用指令介绍

npm（Node Package Manager）是一个非常流行的包管理工具，用于管理JavaScript项目中的依赖关系。在日常开发中，我们经常会使用npm来安装、更新、删除和发布包。本文将详细介绍npm的常用指令，帮助读者更好地了解和使用npm。

2024-05-08 11:02:44 1177

原创简单聊下 Vue 3.0 和 React 18 框架有什么区别

随着Vue3和React 18的相继发布，前端开发领域再次迎来了技术革新的热潮。这两款框架各自迭代升级，不仅优化了原有特性，还引入了许多新概念，使得开发者在构建现代Web应用时拥有更多选择。本文旨在浅层的探讨Vue3与React 18之间的异同，通过理论分析与实战代码示例，帮助开发者理解何时何地选用最适合的工具。

2024-05-07 16:54:53 1707

原创使用 js 类封装项目中音频播放功能的工具方法utils

封装音频播放功能的工具方法，js，es6，前端，工程化

2024-05-07 16:45:26 601 3

原创 Vue 3 父子组件通信语法糖 .sync 实现

vue3父子组件通信方式,语法糖,vue2,vue3,react,next.js,nuxt.js,vite

2024-04-30 15:52:49 823

原创 2024 好用免费的 AI 工具介绍

chatGPT, 通义千问, 通义灵码,文心一言,AI 工具,人工智能,vscode 插件

2024-04-30 12:24:10 4800

原创 React 中 useContext 的用法与性能问题详解

React 中 useContext 是什么？useContext 有什么用？useContext 的使用方式，使用场景。React 父子通信方式。使用 useContext Hook 的组件都将重新渲染。使用 useContext 可以帮助你避免复杂的组件结构并简化数据传递。

2023-11-23 09:00:00 9245 8

原创深入探究 Next.js 中的 getServerSideProps 和 getStaticProps 用法及区别

Next.js 中的 getServerSideProps 和 getStaticProps 用法及区别

2023-10-24 23:23:51 2760 2

原创 Vite 开启本地 https 服务

vite, 开启本地 https 服务，启用 https 协议，运行项目

2023-07-21 18:21:27 6297 2

原创 react中使用redux，但是通过useEffect监听不到redux中的数据变化？

redux, useSelector, 监听 redux 中 state 变化

2023-07-14 18:31:17 2954 3

原创前端JS如何实现对复杂文本进行句子分割，将每句话拆分出来？

NLP库，npm，前端，js 切割句子，分割文本，切割字符串，分割字符串

2023-07-03 10:53:34 2779 5

原创 CSS：background-blend-mode 属性实现同时设置背景颜色和背景图片叠加在一起显示

css，background-blend-mode，背景渐变色，背景图片，渐变色背景和背景图片同时叠加显示

2023-05-22 17:42:20 8686 9

原创 Vue-cli 3.x 脚手架搭建的 Vue 2.x 项目进行 npm install 安装时报错: npm ERR! code 1……

vue 脚手架项目，vue 2.0，npm install 报错，npm ERR! code 1npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sassnpm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

2023-04-25 19:22:24 11007 1