【uniapp开发从0开始做一个小程序-03(主界面)】
之前我们学习了几个简单的元素使用方法，现在我们正式进入小程序页面的制作中。
首先是将之前在index.vue和index.css写的代码删掉或者注释掉，或者新建一个页面（我是注释一部分，删除一部分）
目录
- 导入colorui框架
- 完成5个页面的新建和路由的认知
- 替换图标，设置下方导航栏
导入colorui框架
Colorui是一个写好了的uniapp样式框架，比如说我们有一个毛坯房，colorui相当于做好了的门、窗、家居，在装修房子的时候直接放进房子里，自己选好位置和样式，就能得到好看的精装房
1-1：百度搜索uniapp官网
1-2：点击插件市场
1-3：搜索colorui
1-4：翻到第二页的colorui组件库
1-5：点击名字后打开网页，然后点击下载zip
1-6：下载完成后，解压
1-7：点击文件->导入->从本地导入
1-8：找到解压后的文件夹，选择确定
1-9：此时我们的项目管理器中就会出现colorui的文件
1-10：我们点击运行到chorm浏览器，就会出现各种元素、插件和扩展组件的样式成果。
我运行的时候报了两个找不到图片的错误，都是背景图片，问题不大。
1-11：在我们创建的项目下创建utils文件夹，utils是工具文件夹的意思
1-12：将组件里的colorui文件夹整个复制
1-13：粘贴到utils文件夹下
1-14：仿照ColorUI的App.vue（翻到最下面的 style），将icon.css和mian.css引入本项目的App.vue，导入过程注意项目的路径（我的路径是utils/colorui/xxx.css）
1-15：回到项目index.vue，输入一行代码，如果出现下面的情况，则导入成功
以上则是colorui组件导入成功
完成5个页面的新建和路由的认知
我的导师给的项目要求是5个主要界面（tabbar组件最多只有5个按键位置），可以根据自己的需求合理创建
2-1：首先在pages文件夹下新建4个页面，分别是附近、发现、关注、我的
2-2：在页面里写上页面名字，作为区分
2-3：可以通过修改路由访问不同页面
2-4：打开pages.json文件，找到最后，添加tabbar组件
2-5：修改tabbar，加一些样式内容
2-6：修改后的运行结果
替换图标，设置下方导航栏
3-1：在网上下载字体图标，首先在百度上搜索‘iconfont’，点击阿里巴巴矢量图标库
3-2：登录后搜索自己想要的图标
3-3：点击下载图标
3-4：在项目的static/ img下新建tabbar文件夹，选择自己想要的颜色和大小，点击png下载，下载到项目的tabbar文件夹
3-5：取名为index_select.png ，作为选中时的图片
3-6：再下载一个一样的，但是颜色不一样，作为未选中时的图片，取名为index.png。其他四个菜单栏一样操作
3-7：在page.json中完成list的内容，将每个菜单都完成相应的内容
3-8：运行结果
**总结：**今天的内容差不多添加了colorUI组件，写完了下面的菜单栏（即tabbar组件），内容没有改太多，用的大多都是默认选项。明天的内容，大概会把首页搜索框和轮播图写完，今天的内容就写到这里吧，每天完成一点点，坚持！(ง •̀_•́)ง