为了搞懂这些问题，我们来看看在近几年中，前端技能是怎么发展的。
前真个崛起之路在传统的开拓模式中，每每是把前真个网页代码和后真个程序代码稠浊在一起，借助某种模板技能（如JSP、ASP、PHP）来在做事器端动态天生HTML页面。
在这种开拓模式下，网页的每次改动都须要前后端职员共同参与才能完成，网站前后真个开拓职员须要很大的沟通本钱、折衷本钱。企业招人的时候，也不得不招一些既懂前端又懂后端程序员，来减少前后端开拓职员的冲突。
例如，下面是一段JSP代码，我们可以看到，前后端措辞是混在一起的：
（点击图片可查看大图）
在这段代码中，Java工程师不得不面对前真个HTML代码，前端工程师也不得不面对JSP的<%@ %>、<jsp>这些语法。
那有没有一种办法让前端和后真个代码彻底分开呢？那就得依赖前端技能的进步了。现在盛行的前后端分离的开拓模式，便是让后端只卖力给前端供应数据，由前端卖力全体页面的模板渲染、数据添补以及交互逻辑。
前后端分离之后，人们创造前端已经不再是传统意义上的网页了，它乃至还可以做成一个手机运用，或者做成是微信小程序那样的小型运用，它更靠近于传统的B/S（客户端/做事器）架构，且仍旧具备网页轻量级、无需下载和安装的上风。
前端为什么要组件化开拓
组件化的目的，是为了让页面中的各个部分可以被复用，以减少重复的代码。另一方面，也可以更好地使团队分工协作，让不同的人卖力编写不同的组件。
前端页面可以借助某种框架（如Vue.js、Angular、React）来实现组件化开拓，使代码更随意马虎复用。此时，一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成的了，而是按照组件的思想将网页划分成一个个组件，如轮播图组件、列表组件、导航栏组件等。将这些组件拼装在一起，就形成一个完全的网页了。
我们以京东商城首页为例，它的页面的各部分组件划分如下图所示。
（点击图片可查看大图）
传统开拓 VS 组件化开拓我们来比拟一下“传统开拓”和“组件化开拓”的差异。
在传统开拓中，项目的目录构造一样平常是把HTML文件放在最外层，把CSS文件、JavaScript文件放在单独的目录中，如下图所示：
组件化开拓是须要借助某一种框架来实现的，这里我们以Vue.js框架为例。Vue.js把项目划分成dist目录和src目录，其浸染如下：
01
src目录表示源码目录，它存放编译前的代码；
02
dist目录表示编译结果目录，它存放最终生成出来的网页。编译这个过程是由前真个自动化构建工具来实现的。
下面我们来看一下某个Vue.js项目的目录构造图：
须要把稳的是，src目录下存放的是一些组件，这些组件的代码不能被浏览器识别，它必须被前端构建工具编译到dist目录下才能被浏览器识别，如下图所示。
dist目录下的构造和传统开拓的目录构造很像，外层有个index.html文件，样式和逻辑代码分别放在了css和js目录中。
dist目录下的文件都是由程序自动天生出来的，里面的代码都经由了压缩处理，以确保浏览器能精确识别并实行。但dist目录中的代码不具有可读性，如果用编辑器打开里面的文件，会创造里面的代码是难以阅读的，它只担保代码能被浏览器实行：
（点击图片可查看大图）
开拓职员编写的代码保存在src目录下，这里面存放的是一些单文件组件，这些组件才是我们要重点关注的内容。
组件代码解析利用Vue.js框架编写的单文件组件，以“vue”作为文件扩展名。当我们打开某个组件的文件后，会创造里面的代码紧张分为3部分，即“模板代码”“逻辑代码”和“样式代码”，分别对应HTML构造、JavaScript逻辑和CSS样式，如下所示。
<template> 模板代码</template><script> 逻辑代码</script><style> 样式代码</style>
单文件组件中的这些代码，终极将被编译后放入一个完全的HTML页面中，这样就实现了把传统的一个完全的网页拆分成多少个组件，每个组件都有自己的HTML、CSS、JavaScript代码，当用到哪个组件时，只需在页面中引用哪个组件即可。
每一个项目都有一个最外层的模板index.html和最外层的组件App.vue，它们在项目中所处的位置如下所示：
最外层组件App.vue里面的代码在编译时会经由Vue.js的处理，它会被渲染到index.html中的一个id为app的<div>标签中，在index.html中我们可以找到这个标签：
（点击图片可查看大图）
页面中的组件是具有嵌套关系的，在最外层组件App.vue中，我们可以看到里面用到了一些子组件，这些子组件便是页面中的各个部分。App.vue代码如下。
（点击图片可查看大图）
在上图中，<mt-header>是页面头部组件，<mt-button>是按钮组件，<tabbar>是TAB栏组件，这些组件都以标签的形式来利用，标签的属性可以用来通报参数、绑定事宜。
每个子组件都有自己的构造、逻辑和样式代码，子组件构造代码会被渲染到父组件对应的标签下，用来将子组件显示到页面中。
总结
到这里，我们就对前端组件化开拓有了一个比较清晰的认识。前端技能的发展，便是从网页制作变成了网页运用的开拓，网页不再是一个只用来展示的页面，而是一个运用程序。组件化开拓是为了提高代码的可复用性，以及方便团队分工协作开拓。
对付初学者来说，刚打仗前端组件化开拓时，会以为前端现在变得好繁芜，要学习的东西也变得很多。但是对付须要开拓繁芜的大型运用的企业来说，组件化开拓能极大地提高开拓效率，它让前端开拓团队能高效地完成事情，是一个非常有用的技能。
