我们这一章的定位是“列阵”，准备做一些结构上的搭建和基础组件的开发，为后面业务组件的开发搭好架子。这一章的主要内容是移动端的页面布局和一些基础组件的开发。布局部分会包括项目的建立、页面整体布局的开发和布局组件的开发三部分内容；而基础组件部分会包括字体图标的使用、表单元素的开发和按钮的开发三部分。

作为这章的开篇，我们将介绍一下这章里各个小节的内容。此外，我们在这一节还要说明一下会用什么样的方式来讲解项目的实现过程，让同学们更好的理解开发过程。

章节设计

这一章总共分为8小节，经过这8个小节的学习，我们的项目将会有一个大概的轮廓。现在我们来看下这7个小节都会讲到什么。

3.1-章节介绍
刚才已经提到，这一节我们将会介绍这一章的整体内容，包括各个小节的内容和实战开发部分的学习方法。

3.2-项目的建立

第2节里，我们讲对项目进行搭建，首先要建立文件目录，然后会填充目录里几个基础文件的内容。

3.3-字体图标的使用

这一节我们将讲解字体图标的使用。因为后面的组件很多都会用到图标，所以我们把这部分内容提到最前面来讲解，这一节里会介绍字体图标的原理和字体图标库font-awesome的使用方式。

3.4-页面布局Layout的设计与开发

这一节我们要讲解页面布局的开发，包括页面的分层结构和功能区的划分。这里面包含移动端最常用的布局方式和一些处理布局的技巧。

3.5-布局组件的设计开发

这一节里我们将介绍几个布局中常用的组件，比如标题栏Header的开发和导航栏Navbar的开发。这两个布局组件都会用到flex布局，所以会在这一节里详细介绍flex布局的使用方式。

3.6-表单元素的设计与开发
这一节里我们将介绍几个布局中常用的组件，比如标题栏Header的开发和导航栏Navbar的开发。这两个布局组件都会用到flex布局，所以会在这一节里详细介绍flex布局的使用方式。

3.7-按钮的设计与开发

这一节里我们将介绍一下移动端一般会用到哪几种样式的按钮，然后会对这些按钮从不同角度进行分类，使用不同的class来控制不同维度的分类方式。

3.8-本章总结

本章的最后一节就是总结了，在开发过程中，会总结这一章的总体结构、遇到的知识点，此外还会通过提问的方式让同学们再去回忆一下本章的内容。

开发过程的讲解方式

这一章开始，就进入代码的开发了，在讲解的方式上也会和概念部分的讲解有所区别。开发过程中每一节的内容都大概会包含下面这些内容。

1. 实际案例。在讲解组件的开发时，为了让同学们更好理解，会找一些大家经常能见到的例子来说明，这里会从微信、淘宝或者京东上寻找一些实例。通过这些例子让同学们明白我们要做的是个什么样的组件，都会用在什么地方。最后也会把我们要做的效果图也放出来，作为同学们开发的目标。
2. 设计思路。了解了我们要做的组件以后，就要对这个组件进行拆分，比如某个组件的类要怎么设计、边框要怎么组合等。这里要介绍这些组件的功能要求和需要注意的点，最后再把开发的思路整理好。
3. 涉及知识点。在动手开发之前，我们要先把开发的障碍扫清，把可能会用到的知识点提前讲解，这样在开发的时候就会更顺畅。
4. 组件的开发。每节的最后一部分就是代码的实际开发了。前面几部分内容已经扫清了开发的障碍，到这里就可以直接干活了。在开发过程中也会有一些需要注意的地方，都会以Tips的形式提示出来。

这就是讲解开发过程的大概思路，也会根据实际情况调整前面所说的这几部分内容。

结语

我们这一节负担了两部分的内容，一个是这一章的章节介绍，另一个是介绍了开发部分的讲解方式。这一章的整体结构如下：

在后面的开发过程中，会根据情况把四种讲解方式穿插着使用，最终的目的是让同学们能更好的理解我们在做什么。我们这一节的内容就到这里，下一节会把项目的基础目录结构搭建起来。