如何理解前端工程化
前端工程化详解
- 一、 定义
- 二、特点
- 1. 模块化
- 2. 组件化
- 3. 自动化
- 4. 规范化
- 三、涉及环节
- 1. 项目架构
- 2. 版本控制：
- 3.自动化构建
- 4.任务自动化
- 5. 部署与CI/CD
- 五、 前端工程化的实际应用
- 六、前端工程化的优势:
- 七、总结
一、 定义
前端工程化是指将前端开发中的项目管理、构建、测试、部署等环节进行规范化和自动化的一种开发方式。
二、特点
1. 模块化
（1）定义：将代码拆分为独立的模块，通过导入/导出机制实现代码复用。示例如下：
// ES Modules (现代浏览器支持)
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;// app.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 输出 5
（2）解决的问题：
- 避免全局变量污染
- 代码依赖关系清晰（如通过
import/export） - 典型方案：
CommonJS（Node.js）、ES Modules、AMD
2. 组件化
（1）定义： 将UI拆分为可复用的独立组件，每个组件包含模板、逻辑和样式。
<!-- components/MyButton.vue -->
<template><button class="primary-btn" @click="$emit('custom-click')">{{ text }}</button>
</template><script setup>
defineProps({text: {type: String,default: '按钮'}
});defineEmits(['custom-click']);
</script><style scoped>
.primary-btn {background: #2196f3;color: white;padding: 8px 16px;
}
</style><!-- 在父组件中使用 -->
<template><MyButton text="点我警告" @custom-click="showAlert"/>
</template><script setup>
import MyButton from './components/MyButton.vue';const showAlert = () => {alert('Vue 组件事件触发!');
};
</script>（2）解决的问题：
- 重复代码（如多个页面使用相同按钮样式）
- 维护困难（修改一处即可全局生效）
3. 自动化
（1）工具示例（Webpack）：
// webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.js$/,use: 'babel-loader', // 转译ES6+语法},{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader'], // 处理SASS},],},
};
（2）解决的问题：
- 手动压缩JS/CSS文件
- 手动处理浏览器兼容性（如通过Babel转译）
4. 规范化
ESLint配置示例：
// .eslintrc.json
{"extends": "eslint:recommended","rules": {"semi": ["error", "always"], // 强制分号"indent": ["error", 2], // 2空格缩进"quotes": ["error", "single"] // 单引号}
}
解决的问题：
- 代码风格混乱（如缩进不一致）
- 潜在错误（如未定义变量的使用）
三、涉及环节
1. 项目架构
典型目录结构：
src/
├── components/ // 可复用组件
│ ├── Button/
│ │ ├── index.jsx
│ │ └── styles.scss
├── utils/ // 工具函数
│ └── api.js
├── assets/ // 静态资源
│ └── images/
└── App.jsx // 入口组件
解决的问题：
- 文件随意存放导致维护困难
- 团队协作时的路径混乱
2. 版本控制：
使用版本控制系统（如Git）对代码进行管理，实现多人协作、版本回退、分支管理等功能。
Git是目前版本控制工具中最受欢迎的一种，用于管理项目中的代码版本和团队协作开发。
3.自动化构建
使用构建工具（如Webpack、Gulp）将源码编译、压缩、合并、打包等操作自动化处理，以生成可部署或上线的最终代码
4.任务自动化
使用任务自动化工具（如Grunt、Gulp）将繁琐的重复任务（如图片压缩、文件合并等）自动化处理。
5. 部署与CI/CD
使用持续集成/持续交付（CI/CD）工具和流程，实现代码的自动部署和发布。GitHub Actions示例：
.github/workflows/deploy.yml
name: Deploy to Production
on:push:branches: [main]
jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v2- name: Install dependenciesrun: npm install- name: Build projectrun: npm run build- name: Deploy to AWS S3uses: actions/aws/s3@v1with:args: --acl public-read --follow-symlinks --delete ./dist s3://my-bucket
解决的问题：
- 手动FTP上传代码
- 部署过程中的人为错误
工具链全景图
代码编写 → ESLint检查 → Git提交 → Webpack构建 → Jest单元测试 → Docker容器化 → AWS部署│ │ │Prettier格式化 Husky钩子 Travis CI
五、 前端工程化的实际应用
场景示例：开发一个电商网站
组件化：复用商品卡片组件（ProductCard）
模块化：抽离价格计算工具函数（calculateDiscount）
自动化：
Webpack自动打包SCSS为CSS
Husky在Git提交前自动运行ESLint
规范化：通过Commitlint约束提交信息格式（如feat: add product filter）
六、前端工程化的优势:
- 开发效率提升：组件复用减少重复代码
- 错误率降低：自动化测试覆盖核心功能
- 团队协作标准化：新人快速理解项目结构
- 部署流程可靠：CI/CD减少人为失误
七、总结
前端工程化通过规范化和自动化前端开发流程，提高了开发效率、代码质量和团队协作能力。它适应了快速迭代、多平台适配的现代前端开发需求，是前端开发领域的重要趋势。
相关文章：
如何理解前端工程化
前端工程化详解 一、 定义二、特点1. 模块化2. 组件化3. 自动化4. 规范化 三、涉及环节1. 项目架构2. 版本控制：3.自动化构建4.任务自动化5. 部署与CI/CD 五、 前端工程化的实际应用六、前端工程化的优势:七、总结 一、 定义 前端工程化是指将前端开发…...
嵌入式八股RTOS与Linux---进程间的通信与同步篇
前言 同步异步、阻塞/非阻塞是什么? 同步:在执行某个操作时，调用者必须等待该操作完成并返回结果后，才能继续执行后续的操作异步:在执行某个操作时，调用者发起操作后不必等待其完成，可以立即继续执行后续的操作。操作完成后&am…...
=＞{ this.resetForm()； }))
this.centerDialogVisible = true this.$nextTick(()=＞{ this.resetForm()； })
这段代码的作用是 打开一个对话框，并在对话框打开后 重置表单。下面是对这段代码的详细解析： 1. 代码作用 this.centerDialogVisible true：控制对话框的显示。this.$nextTick(() > { ... })：在 DOM 更新后执行回调函数&#…...
datawhale组队学习--大语言模型—task4：Transformer架构及详细配置
第五章 模型架构 在前述章节中已经对预训练数据的准备流程（第 4 章）进行了介绍。本章主 要讨论大语言模型的模型架构选择，主要围绕 Transformer 模型（第 5.1 节）、详细 配置（第 5.2 节）、主流架…...
专业级 AI 提示生成工具清单
1. 引言 近年来，随着 GPT-3、GPT-4 等大规模预训练语言模型的广泛应用，提示（Prompt）工程作为驱动模型输出质量的重要环节，受到了各界的高度关注。精心设计、管理与优化提示，不仅能够大幅提高生成文本的准确…...
Web前端考核 JavaScript知识点详解
一、JavaScript 基础语法 1.1 变量声明 关键字作用域提升重复声明暂时性死区var函数级✅✅❌let块级❌❌✅const块级❌❌✅ 1.1.1变量提升的例子 在 JavaScript 中，var 声明的变量会存在变量提升的现象，而 let 和 const 则不会。变量提升是指变量的声…...
设计模式)
23种设计模式-生成器(Builder)设计模式
工厂方法设计模式 🚩什么是生成器设计模式？🚩生成器设计模式的特点🚩生成器设计模式的结构🚩生成器设计模式的优缺点🚩生成器设计模式的Java实现🚩代码总结🚩总结 🚩什么…...
框架漏洞攻略)
Thinkphp(TP)框架漏洞攻略
1.环境搭建 vulhub/thinkphp/5-rce docker-compose up -d 2.访问靶场 远程命令执行： ? sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]system&vars[1] []whoami 远程代码执行： ? s/Index/\think\app/invokefunc…...
HTTP/HTTPS 中 GET 请求和 POST 请求的区别与联系
一、基础概念 HTTP (HyperText Transfer Protocol, 超文本传输协议) 是一种用于浏览器与服务器之间进行数据交互的协议。HTTPS (加密的 HTTP) 则通过 SSL/TLS 协议实现通信加密与数据安全性。 二、GET 和 POST 概述 GET 请求: 用于从服务器获取资源。 POST 请求: 用于将数据…...
2021年蓝桥杯第十二届CC++大学B组真题及代码
目录 1A：空间（填空5分_单位转换） 2B：卡片（填空5分_模拟） 3C：直线（填空10分_数学排序） 4D：货物摆放（填空10分_质因数） 5E…...
解锁 AWX+Ansible 自动化运维新体验：快速部署实战
Ansible 和 AWX 是自动化运维领域的强大工具组合。Ansible 是一个简单高效的 IT 自动化工具，而 AWX 则是 Ansible 的开源 Web 管理平台，提供图形化界面来管理 Ansible 任务。本指南将带你一步步在 Ubuntu 22.04 上安装 Ansible 和 AWX，使用 M…...
简洁、实用、无插件和更安全为特点的WordPress主题
简站WordPress主题是一款以简洁、实用、无插件和更安全为特点的WordPress主题，自2013年创立以来，凭借其设计理念和功能优势，深受用户喜爱。以下是对简站WordPress主题的详细介绍： 1. 设计理念 简站WordPress主题的核心理念是“崇…...
区块链学习总结
Hardhat 是一个用于 Ethereum 智能合约开发 的开发环境，专为 Solidity 语言编写的智能合约提供工具支持。它能够帮助开发者 编译、部署、测试和调试 智能合约，并提供一个本地的以太坊测试网络。 Hardhat 的核心功能 本地开发网络（Hardhat Ne…...
可发1区的超级创新思路（python\matlab实现）：基于周期注意力机制的TCN-Informer时间序列预测模型
首先声明，该模型为原创！原创！原创！且该思路还未有成果发表，感兴趣的小伙伴可以借鉴！ 一、应用场景 该模型主要用于时间序列数据预测问题，包含功率预测、电池寿命预测、电机故障检测等等 二、模型整体介绍（本文以光伏功率预测为例） 1.1 核心创新点 本模型通过三阶段…...
案例4：鸢尾花分类（pytorch）
一、引言 鸢尾花分类是机器学习领域的经典案例，常用于演示分类算法的基本原理和应用。本案例使用 PyTorch 构建一个简单的神经网络模型，对鸢尾花进行分类。通过该案例，我们可以学习如何使用 PyTorch 进行数据处理、模型构建、训练和评估&…...
本地部署Stable Diffusion生成爆火的AI图片
直接上代码 Mapping("/send") Post public Object send(Body String promptBody) { JSONObject postSend new JSONObject(); System.out.println(promptBody); JSONObject body JSONObject.parseObject(promptBody); List<S…...
CCF-CSP历年真题答案1，2
本文代码主要来自up主圣斗士-DS-ALGO对历年真题的讲解，在此特别感谢。 侵权则删。 10.1_分蛋糕_2017_03 #include <iostream> using namespace std;int main() {int a[1000], n, k; // 定义数组a用于存储蛋糕的重量，整数n表示蛋糕的数量…...
以及什么是回表？)
【MySQL】一篇讲懂什么是聚簇索引和非聚簇索引(二级索引)以及什么是回表？
1.聚簇索引： 叶子节点直接存储了完整的数据行。 每个表只能有一个聚簇索引，通常是主键(Primary Key)。如果没有定义主键，则MySQL会选择一个唯一且非空索引作为聚簇索引。 特点： 数据存储：叶子结点存储完整的数据行…...
炫酷的HTML5粒子动画特效实现详解
炫酷的HTML5粒子动画特效实现详解 这里写目录标题 炫酷的HTML5粒子动画特效实现详解项目介绍技术栈项目架构1. HTML结构2. 样式设计 核心实现1. 粒子类设计2. 动画效果实现星空效果烟花效果雨滴效果 3. 鼠标交互 性能优化效果展示总结 项目介绍 本文将详细介绍如何使用HTML5 C…...
go-zero学习笔记
内容不多，只有部分笔记，剩下的没有继续学下去，包括路由与处理器、日志中间件、请求上下文 文章目录 1、go-zero核心库1.1 路由与处理器1.2 日志中间件1.3 请求上下文 1、go-zero核心库 1.1 路由与处理器 package mainimport ("github…...
QuecPython 网络协议之TCP/UDP协议最祥解析
概述 IP 地址与域名 IP 地址是网络中的主机地址，用于两台网络主机能够互相找到彼此，这也是网络通信能够成功进行的基础。IP 地址一般以点分十进制的字符串来表示，如192.168.1.1。 我们日常访问的网站，其所在的服务器主机都有…...
)
FPGA_YOLO(二)
上述对cnn卷积神经网络进行介绍，接下来对YOLO进行总结，并研究下怎么在FPGA怎么实现的方案。 对于一个7*7*30的输出 拥有49个cell 每一个cell都有两个bbox两个框，并且两个框所包含的信息拥有30个 4个坐标信息和一个置信度5个，剩下就是20个类别。 FPGA关于YOLO的部署 1…...
Camera2 与 CameraX 闲谈
目录 📂 前言 1. 🔱 Camera2 2. 🔱 CameraX 3. 🔱 Camera2 与 CameraX 1）使用复杂度与开发效率 2）控制能力与应用场景 3）设备兼容性与稳定性 4）更新与维护 4. 💠…...
【零基础入门unity游戏开发——2D篇】2D物理系统 —— 2D刚体组件（Rigidbody 2d）
考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的…...
【论文#目标检测】YOLO9000: Better, Faster, Stronger
目录 摘要1.引言2.更好（Better）3.更快（Faster）4.更健壮（Stronger）使用 WordTree 组合数据集联合分类和检测评估 YOLO9000 5.结论 Author: Joseph Redmon; Ali Farhadi Published in: 2017 IEEE Conference …...
C++异常处理时的异常类型抛出选择
在 C 中选择抛出哪种异常类型，主要取决于错误的性质以及希望传达的语义信息。以下是一些指导原则，帮助在可能发生异常的地方选择合适的异常类型进行抛出： 1. std::exception 适用场景：作为所有标准异常的基类，std::e…...
centos 7 搭建FTP user-list用户列表
在 CentOS 7 上搭建基于 user_list 的 FTP 用户列表，你可以按以下步骤操作： 1. 安装 vsftpd 服务 若还未安装 vsftpd，可以使用以下命令进行安装： bash yum install -y vsftpd2. 启动并设置开机自启 vsftpd 服务 bash systemctl…...
vulnhub-Tr0ll ssh爆破、wireshark流量分析，exp、寻找flag。思维导图带你清晰拿到所以flag
vulnhub-Tr0ll ssh爆破、wireshark流量分析，exp、寻找flag。思维导图带你清晰拿到所以flag 1、主机发现 arp-scan -l 2、端口扫描 nmap -sS -sV 192.168.66.185 nmap -sS -A -T4 -p- 192.168.66.185 nmap --scriptvuln 192.168.66.185经典扫描三件套，…...
k8s中service概述（二）NodePort
NodePort 是 Kubernetes 中一种用于对外暴露服务的 Service 类型。它通过在集群的每个节点上开放一个静态端口（NodePort），使得外部用户可以通过节点的 IP 地址和该端口访问集群内部的服务。以下是关于 NodePort Service 的详细说明࿱…...
搭建Redis哨兵集群
停掉现有的redis集群 因为这篇文章我是在 搭建完redis主从集群之后写的，如果要是没有搭建过这些，可以直接略过。要是从我上一篇 搭建redis主从集群过来的，可以执行下。 docker compose down 查找下redis相关进程 ps -ef | grep redis 可以看…...
.Net SSO 单点登录方式
SSO单点登录目的 之前一般来讲系统简单，登录后 本地 cookie 加服务器 session 存储用户身份信息，以此为依据来判断用户再次登录时免验证 但随着互联网发展，很多应用 部署在不同的服务器上，而用户体系是一套，那么按照原…...
SQL 基础 BETWEEN 的常见用法
在SQL中，BETWEEN是一个操作符，用于选取介于两个值之间的数据。 它包含这两个边界值。BETWEEN操作符常用于WHERE子句中，以便选取某个范围内的值。 以下是BETWEEN的一些常见用法： 选取介于两个值之间的值： 使用 BETWE…...
ngx_http_add_location
声明在 src\http\ngx_http_core_module.c ngx_int_t ngx_http_add_location(ngx_conf_t *cf, ngx_queue_t **locations,ngx_http_core_loc_conf_t *clcf); 定义在 src\http\ngx_http.c ngx_int_t ngx_http_add_location(ngx_conf_t *cf, ngx_queue_t **locations,ngx_http…...
深入探索ArkUI中的@LocalBuilder装饰器：构建高效可维护的UI组件
在ArkUI框架中，组件化开发是提升代码复用性和维护性的关键手段。随着项目复杂度的增加，开发者常常面临如何在保持组件封装性的同时，灵活处理组件内部逻辑的问题。传统的Builder装饰器虽然提供了强大的自定义构建能力，但在某些场景…...
视频知识库初步设想
将视频字幕提取出来作为知识库来源定位，下一步设想：把视频上的图片信息也精简出来作为定位。 下面是测试例子： 入参: {"model":"deepseek-ai/DeepSeek-R1-Distill-Llama-8B","messages":[{"role":"system","cont…...
微信小程序中使用Less样式方法
在微信小程序中使用Less样式，可以通过以下步骤实现。主要原理是借助Visual Studio Code（VSCode）的插件将Less文件自动编译为小程序支持的.wxss文件，或通过微信开发者工具的扩展功能直接集成Less编译环境。以下是具体方法ÿ…...
2024年MathorCup数学建模A题移动通信网络中PCI规划问题解题全过程文档加程序
2024年第十四届MathorCup高校数学建模挑战赛 A题 移动通信网络中PCI规划问题 原题再现： 物理小区识别码(PCI)规划是移动通信网络中下行链路层上，对各覆盖小区编号进行合理配置，以避免PCI冲突、PCI混淆以及PCI模3干扰等现象。PCI规划对于减少…...
本周安全速报（2025.3.18~3.24）
合规速递 01 2025欧洲网络安全报告：DDoS攻击同比增长137%，企业应如何应对？ 原文: https://hackread.com/european-cyber-report-2025-137-more-ddos-attacks/ 最新的Link11《欧洲网络安全报告》揭示了一个令人担忧的趋势：DDo…...
力扣刷题-热题100题-第23题（c++、python）
206. 反转链表 - 力扣（LeetCode）https://leetcode.cn/problems/reverse-linked-list/solutions/551596/fan-zhuan-lian-biao-by-leetcode-solution-d1k2/?envTypestudy-plan-v2&envIdtop-100-liked 常规法 记录前一个指针，当前指针&am…...
YAML是什么？
YAML（YAML Ain’t Markup Language）是一种以数据为中心、高度可读的序列化语言，广泛应用于配置文件、数据交换和自动化工具中。以下从多个维度对其进行全面解析： 1. 定义与历史演变 全称与定位： YAML的全称最初为“Yet…...
期权交易投资怎么操作？新手期权操作指南
期权就是股票，唯一区别标的物上证指数，会看大盘吧，新手做期权交易两个方向认购做多，认沽做空，双向t0交易没了，跟期货一样，对的，玩的也是合约，唯一区别没有保证金不会爆仓…...
音视频学习（三十）：fmp4
FMP4（Fragmented MP4）是 MP4（MPEG-4 Part 14）的扩展版本，它支持流式传输，并被广泛应用于DASH（Dynamic Adaptive Streaming over HTTP）和HLS（HTTP Live Streaming…...
破局AI落地困局 亚信科技“四位一体手术刀“切开产业智能三重枷锁
当全球进入以AI为核心竞争力的新经济周期，政企机构的数字化转型正面临关键转折点：IDC数据显示，2023年超过67%的中国企业在AI落地环节遭遇"技术断层"，高昂的试错成本与碎片化解决方案让智能转型陷入僵局。在此背景下&…...
android 去掉状态栏的方法汇总
在 Android 开发中，隐藏或去除状态栏（Status Bar）有多种方法，具体实现方式取决于应用场景和目标 Android 版本。以下是常用的 6 种方法及其代码示例： 在 Android 开发中，隐藏或去除状态栏（Sta…...
jenkins+1panel面板java运行环境自动化部署java项目
本文章不包含1panel面板安装、jenkins部署、jenkins连接git服务器等操作教程，如有需要可以抽空后期补上 jenkins安装插件Publish Over SSH 在系统配置添加服务器 查看项目的工作空间 项目Configure->构Post Steps选择Send files or execute commands over SSH…...
VLAN综合实验报告
一、实验拓扑 网络拓扑结构包括三台交换机（LSW1、LSW2、LSW3）、一台路由器（AR1）以及六台PC（PC1-PC6）。交换机之间通过Trunk链路相连，交换机与PC、路由器通过Access或Hybrid链路连接。 二、实验…...
雷军从 6 楼扔涂有防弹涂层西瓜，西瓜完好无损，这种防弹涂层是什么材质？用在车上效果怎么样？
雷军展示的“防弹涂层”是一种基于第四代高分子材料聚脲（Polyurea）的升级技术，其核心特性是通过纳米级交联结构形成弹性防护层，兼具柔韧性与刚性，能够有效吸收冲击能量并抵御尖锐物体的穿刺。以下是关于该涂层材质及在…...
信奥赛CSP-J复赛集训（模拟算法专题）（31）：P2692 覆盖
信奥赛CSP-J复赛集训（模拟算法专题）（31）：P2692 覆盖 题目背景 WSR 的学校有 B B B 个男生和 G G G 个女生都来到一个巨大的操场上扫地。 题目描述 操场可以看成是 N N N 行 M M M 列的方格矩阵，如下…...
)
数据库联表Sql语句建一个新表(MySQL,Postgresql,SQL server)
数据库联表Sql语句建一个新表(MySQL,Postgresql,SQL server) 如果你想基于 SELECT USERS.ID,USERS.NAME,USERS.EMAIL,USERS.ID_CARD,USERS.V_CARD,USERS.ADDRESS,v_card.type,v_card.amount FROM USERS JOIN v_card on USERS.V_CARDv_card.v_card 这个查询结果创建一个新表&am…...
【Go】结构体的基本使用
go语言不是面向对象的语言 但是结构体类似于面向对象 结构体的定义 package mainimport "fmt"type Student struct {id intname stringage intschool string }func main() {s : Student{1, "luobozi", 18, "znl"}fmt.Println(s) }结构…...