那什么是组件化呢？我们可以认为组件就是页面里的 UI 组件，一个页面可以由很多组件构成。例如一个后台管理系统页面，可能包含了 Header、Sidebar、Main 等各种组件。一个组件又包含了 template(html)、script、style 三部分，其中 script、style 可以由一个或多个模块组成。
- 在传统的开发模式中，往往是把前端的网页代码和后端的程序代码混合在一起，借助某种模板技术（如 JSP、ASP、PHP）来在服务器端动态生成 HTML 页面。在这种开发模式下，网页的每次改动都需要前后端人员共同参与才能完成，网站前后端的开发人员需要很大的沟通成本、协调成本。企业招人的时候，也不得不招一些既懂前端又懂后端程序员，来减少前后端开发人员的冲突。
前端为什么需要组件化开发呢
- 组件化的目的就是为了让页面中的各个部分可以被复用来减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人负责编写不同的组件。
- 页面上的每个独立的、可视/可交互区域视为一个组件；
- 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
- 可以参考京东商城案例，京东把页面个各个部分来规划处组件
- 得益于技术的发展，目前三大框架在构建工具（例如 webpack、vite...）的配合下都可以很好的实现组件化。例如 Vue，使用 _.vue 文件就可以把 template、script、style 写在一起，一个 _.vue 文件就是一个组件。
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: '组件化开发',
};
},
};
</script>
<style>
body {
color: #fff;
}
</style>组件化的理念：
- 页面上独立的可视/可交互区域视为一个组件
- 每个组件作为一个目录，所需资源就近维护，在统一工程目录开发维护
- 组件之间可以只有组合替换
- 组件的可复用性
- 到这里，我们就对前端组件化开发有了一个比较清晰的认识。前端技术的发展，就是从网页制作变成了网页应用的开发，网页不再是一个只用来展示的页面，而是一个应用程序。组件化开发是为了提高代码的可复用性，以及方便团队分工协作开发。
