uniapp 创建与配置 tabbar

1. 创建页面

1. 删除 pages 下的 index 文件夹
   

2. 在 pages 文件夹处，右键 -> 选择新建页面
   

3. 确认新建页面的信息
   
   由于咱们删除了默认的index.vue页面，导致编译报错
   
   找到pages.json文件，把鼠标选中部分配置删除即可
   

2. 配置 pages.json

1. 删除 index 路径（这一步咱们上面已经做了）

2. 新建 tabbar 节点

3. 复制 图标资源 文件夹下 tab-icons 文件夹到 static 文件夹中
   这个需要自己去图标网站下载
   推荐使用阿里图标库
   https://www.iconfont.cn/
   

3. 依次创建me和record页面

4. 案例源码

最终代码如下：

{
	"pages": [
		{
		    "path" : "pages/index/index",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		},
        {
            "path" : "pages/me/me",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/record/record",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	},
  "tabBar": {
    "selectedColor": "#1296db",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "static/tab-icons/index.png",
        "selectedIconPath": "static/tab-icons/index-active.png"
      },
      {
        "pagePath": "pages/record/record",
        "text": "记录",
        "iconPath": "static/tab-icons/record.png",
        "selectedIconPath": "static/tab-icons/record-active.png"
      },
      {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "static/tab-icons/me.png",
        "selectedIconPath": "static/tab-icons/me-active.png"
      }
    ]
  }
}

5. 效果图