1.页面搭建 uniapp中页面的搭建与微信小程序雷同，都是div换成view即可。其他标签都与html相同：  css的使用也相同。 做个首页：  2.将复用模块组件化 以banner为例。 （1）新建组件 在项目中新建文件夹component用于存放组件，在里边新建一个组件：  起名为banner，其中内容与普通页面一致：  接下来将banner的内容放到组件中：  （2）引入组件 在项目主文件中引入该文件，并用Vue.component声明该文件为组件：  此时就可以使用此组件了，在首页中利用组件在原来的banner位置进行替换：  完成，没问题。 （3）组件传值 既然是可复用组件，其中的数据和内容就需要是可以动态绑定的。 此时就需要用到props，回到组件中进行设置：  其中type是数据类型，如果传值是其他数据类型则报错。required是是否是必须项，如果为true则不传值时会报错。设置完成后，保存后查看页面：  此时页面报错，因为我们没有为banner组件传值。 在banner组件标签中进行传值：  设置好传值后保存，页面正常显示，组件设置完成。 此页面中的功能基本都可以复用，所以全部按照上面的方法进行组件化即可。 3.轮播 轮播就使用uniapp的swiper组件： ``` <swiper autoplay="true" circular="true" interval="5000" style="height: 300px;"> <swiper-item> <banner></banner> </swiper-item> <swiper-item> <banner></banner> </swiper-item> </swiper> ```  轮播组件的设置并非只根据图片的高度进行设置，只要我们手动通过css给予轮播组件一个高度，是完全可以将标题等内容显示出来的。 到此，页面的制作大概先到这里，继续往下做，后边有其他功能我会分享到下篇文章。