Vue基础自学系列 | 前端工程化

Posted 2022-08-29 COCOgsta

视频来源：B站《黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程》

一边学习一边整理老师的课程内容及试验笔记，并与大家分享，侵权即删，谢谢支持！

附上汇总贴：Vue基础自学系列 | 汇总_COCOgsta的博客-CSDN博客

---

1. 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发：

• 会写html + CSS + javascript就会前端开发

• 需要美化页面样式，就拽一个bootstrap过来

• 需要操作DOM或发起Ajax请求，再拽一个jQuery过来

• 需要快速实现网页布局效果，就拽一个Layui过来

实际的前端开发：

• 模块化（js的模块化、css的模块化、资源的模块化）

• 组件化（复用现有的UI结构、样式、行为）

• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）

• 自动化（自动化构建、自动部署、自动化测试）

1. 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

企业中的Vue项目和React项目，都是基于工程化的方式进行开发的。

好处：前端开发自成体系，有一套标准的开发方案和流程。

1. 前端工程化的解决方案

早期的前端工程化解决方案：

• grunt（www.gruntjs.net/）

• gulp（gulpjs.com.cn/）

目前主流的前端工程化解决方案：

• webpack（www.webpackjs.com/）

• parcel（zh.parceljs.org/）