声明：本教程不收取任何费用，欢迎转载请注明出处，尊重作者劳动成果，不得用于商业用途，侵权必究！！！
目录
一、项目首页分析
步骤1：在项目根组件 App.vue 里面，分三部分
步骤2：App.vue 展示到页面上
二、制作项目首页的顶部Header
Mint UI 的基本使用
浏览器查看元素属性，如：宽高像素(px)等
三、制作项目首页的底部Tabbar
MUI 的基本使用
那么怎么使用这个 tabbar ？
09.项目-制作项目首页的Header和Tabbar区域
第一部分：<!-- 顶部 Header 区域 -->
第二部分：<!-- 中间的 路由 router-view 区域 -->
第三部分：<!-- 底部 Tabbar 区域 -->
1、在 index.html 的容器里面，需要把 App.vue 放进去
2、在 main.js 里面 ，渲染 App.vue 这个根组件
也就是说通过挂载 id ，渲染 App.vue 这个根组件，把 App.vue 放到 index.html 的容器里面
以后在做项目的时候，我们要有偷懒的精神，先看看或问问是否有现成的！
Mint UI官方地址：https://mint-ui.github.io/#!/zh-cn
进入官网--->开始使用--->中文（Vue 2.0 版）
command + f ，搜索 Header，回车
左侧的 Header 点击进去可看具体的代码实现
右侧的 Header 点击进去可看预览手机效果
要使用 Mint UI 的组件，需要按需导入 Mint-UI 中的组件
在 main.js 、App.vue 里面，分别复制粘贴，写入如下图代码：
Header就被固定定位了，它不占标准流了，所以叠在上面了
查看 Header 宽高像素
我们点击如下图，右上角的图标，然后把鼠标放在 Header 上面，
我们可以看到 Header 的高度为 40 像素(px)
然后在 App.vue 里面添加一个样式，它就会被挤下来
刚刚讲的 Mint UI 里面也有 tabbar，但是太丑了。
这里我们可以使用 MUI，这个是它的官网地址：https://dev.dcloud.net.cn/mui/
我们可以去官网看看预览，比如看有哪些功能等，如下：
下面我们可以具体这样操作，进入 MUI 的 github 地址：https://github.com/dcloudio/mui
下载它的源码并解压如下：
mui-master---->examples---->hello-mui---->examples
按字母 t，我们快速定位找到 tabbar.html，如下左图：
tabbar.html 右键用浏览打开，然后右键检查，如下右图：
我们就把它当作为 bootstrap 的一个快速代码片段，右键显示网页源代码
然后复制对应的，上图的代码到项目 App.vue 中，运行的效果如下：
效果有点丑，我们还需要在项目 Main.js 中，导入 MUI 的样式
然后运行结果如下图：
