前端工程化

concurrently 命令详解使用 pnpm add concurrently -w 时，-w 标志表示将 concurrently 安装到 monorepo 根目录，这会将它作为整个项目的依赖，而不仅仅是某个子包的依赖。因此，安装命令应该在项目的根目录执行，这样所有的子包（包括 cardui 层）都可以共享该依赖。

【pnpm、npm】各种命令详解pnpm -F mock-server start 里的 -F 是 --filter 的简写，意思是：只在名为 mock-server 的工作区（package）中执行命令。

写代码不规范，同事两行泪 😭（工程化如何让团队协作更高效）在实际的前端项目中，你是否也遇到过这样让人头疼的情况：一系列问题都源自代码不规范以及缺乏系统的工程化管理，导致团队协作效率低下，开发周期不断延长，你开始发现，团队成员之间的沟通和协作逐渐变成了“甩锅大战”，每次交付后都有人责怪别人做得不好，项目进度也因为这些问题而不断延迟，但是，不用担心！这些问题都能通过工程化手段解决，看完这篇文章之后，你会掌握一套实用、落地、可扩展的前端工程化流程，不仅能让你的代码变得健壮、清晰、可维护，更能大幅提升团队协作效率。从现在开始，一起告别“屎山代码”，让项目稳、团队顺、交付

爱抽烟的大liu

原生开发与H5开发：探索两者的优势及应用场景先列举两者之间的特点在当今的移动应用开发领域，原生开发和基于HTML5（简称H5）的混合开发模式是两种主流的选择。每种方式都有其独特的优点，适用于不同的业务需求和技术场景。本文将深入探讨这两种开发模式的特点，并重点分析使用H5开发业务的具体优势。

如何在大型项目中有效使用TypeScript进行类型定义？嗨，大家好，我是莫循，Typescript是JavaScript的超集，现在已经广泛用于前端开发，那么在项目中如何用好类型定义呢？以下是一些可以提供参考的案例实践。

代码小学僧

如何优雅地重构一个企业官网 Nextjs 前端项目最近接手了公司企业官网的开发项目，采用的是 Next.js 14。由于项目初期时间紧、任务重，前任同事直接在公司海外官网的 Next.js 项目基础上进行修改，因此代码结构和需求并不完全匹配。

超简单！3 步搭建免费个人 Blog！【附源码】当我们想快速搭建一个个人网站，用来记录平时的知识点，或者作为个人面试的展示项目时，该如何免费搭建一个简单的网站呢？答案就是使用 GitHub + VitePress。

如何在大型项目中组织和管理 Vue3 Hooks？众所周知，Vue Hooks（通常指 Composition API 中的功能）是 Vue 3 引入的一种代码组织方式，用于更灵活地组合和复用逻辑。但是在项目中大量使用这种写法该如何更好的搭建结构呢？以下是可供参考实践的简单示例。

包（前端模块化 AMD&CMD&CommonJS&ES6 Module）早期前端业务简单，将业务代码写在不同 JS 文件里面，然后手动维护加载顺序导入即可。以下是一个无模块化的工程代码示例：

Vue3 Composition API 完全指南嗨，大家好，我是莫循，今天给大家分享一篇Vue3 Composition API的使用指南。组合式API核心概念

前端_yu小白

前端工程化开篇前端发展史梳理：最早的html，css，js是前端三剑客，足以实现所有的前端开发任务，但是呢，一个简单的前端交互效果可能就需要一大堆的代码去实现。

控件即是块编辑器的「块」近期时不时地会想「反混沌前端工程」当前比较重要且优先的两块事情：控件（UI 组件）体系 Petals 和通用块编辑器。

前端监控学习-实现简易埋点上报SDK仓库地址在文末用于衡量页面从开始加载到浏览器首次将像素渲染到屏幕上的时间点；FP 是浏览器首次将任何内容（如背景色、边框、占位符等）渲染到屏幕上的时间点。即使内容非常简单（例如纯背景色），只要屏幕上不再是空白，就触发FP。有一定局限性，现在更推荐使用FCP 和 LCP 作为核心指标。

🔥《一头扎进》系列之Python+Selenium框架实战篇21- 价值好几K的框架，呵！这个框架有点意思啊！！！前面文章，我们实现了框架的一部分功能，包括日志类和浏览器引擎类的封装，今天我们继续封装一个基类和介绍如何实现POM。关于基类，是这样定义的：把一些常见的页面操作的selenium封装到base_page.py这个类文件，以后每个POM中的页面类，都继承这个基类，这样每个页面类都有基类的方法，这个我们会在这篇文章由宏哥实现。

🔥《一头扎进》系列之Python+Selenium框架设计篇20- 价值好几K的框架，狼来了，狼来了....，狼没来，框架真的来了前边宏哥一边一边的喊框架，就如同一边一边的喊狼来了！狼来了！.....这回是狼没有来，框架真的来了。从本文开始宏哥将会一步一步介绍，如何从无到有地创建自己的第一个自动化测试框架。这一篇，我们介绍，如何封装自己的日志类和浏览器引擎类。

10分钟完成代码检查和自动版本管理本文档介绍我们团队采用的代码质量管理工具（Husky、ESLint、Prettier、commitlint、lint-staged）和版本自动化工具（semantic-release）的原理、配置和使用方法。通过这些工具，我们旨在提升代码一致性、规范提交信息，并自动化版本管理。

前端工程化：组件设计原则和通信方式面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

命令行工具揭秘当我们运行 npx @vue/cli create my-project 创建一个项目时，就是通过 npx 执行了@vue/cli包中的可执行文件。“可执行文件”就是我们通常说的脚本，许多 npm 包的可执行文件是用 JavaScript 编写的，例如： xx.ts、xx.mts、xx.js 等等，使用 Node.js 环境来运行。在 package.json 文件中，npm 包的开发者可以通过 bin 字段来指定可执行文件的路径，命令作为key，可执行文件路径作为value。例如 @vue/cli 可执

前端工程化：Github Action 实现 CI/CD面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

这人是玩数学的

搭建组件知识库，优化 AI 生成代码的效果在上文《在 Cursor 中搭建 MCP 服务，利用 AI 将 Figma 转成代码》中介绍了 Figma 如何转成代码，但在实际应用中会有一点小问题