经过前面的文章介绍，基本上 UniApp 的内容就介绍完毕了
那么从本文开始，我们就开始进行一个项目的实战
这次做的项目是苹果计算器，这个项目的难度不是很大，但是也不是很简单，适合练手
创建项目
打开 HBuilderX，点击左上角 文件 -> 新建 -> 项目：
搭建基本布局
项目创建完毕之后，首先来分析一下苹果计算器的整体布局结构，分为一上一下如下图：
上面的部分主要是显示计算结果的，下面的部分主要是显示计算器的按键
搭建上半部分布局
更改 index.vue 的内容如下：
运行一下，看看效果发现，背景并没有是黑色，而是白色。
注意点：在 UniApp 中所有的元素都是放在 page 中的, 所以想要全屏，可以直接设置 page 的样式
我们需要在 App.vue 中修改一下：
这么一改，就可以了，效果如下：