Vue笔记整理，09.项目-制作项目首页的Header和Tabbar区域

声明：本教程不收取任何费用，欢迎转载请注明出处，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

目录

一、项目首页分析

步骤1：在项目根组件 App.vue 里面，分三部分

步骤2：App.vue 展示到页面上

二、制作项目首页的顶部Header

Mint UI 的基本使用

浏览器查看元素属性，如：宽高像素(px)等

三、制作项目首页的底部Tabbar

MUI 的基本使用

那么怎么使用这个 tabbar ？

---

09.项目-制作项目首页的Header和Tabbar区域

  

 

一、项目首页分析

 

步骤1：在项目根组件 App.vue 里面，分三部分

第一部分：<!-- 顶部 Header 区域 -->

第二部分：<!-- 中间的 路由 router-view 区域 -->

第三部分：<!-- 底部 Tabbar 区域 -->

 

步骤2：App.vue 展示到页面上

1、在 index.html 的容器里面，需要把 App.vue 放进去

 

2、在 main.js 里面 ，渲染 App.vue 这个根组件

也就是说通过挂载 id ，渲染 App.vue 这个根组件，把 App.vue 放到 index.html 的容器里面

 

 

二、制作项目首页的顶部Header

 

Mint UI 的基本使用

以后在做项目的时候，我们要有偷懒的精神，先看看或问问是否有现成的！

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就被固定定位了，它不占标准流了，所以叠在上面了

 

浏览器查看元素属性，如：宽高像素(px)等

查看 Header 宽高像素

我们点击如下图，右上角的图标，然后把鼠标放在 Header 上面，

我们可以看到 Header 的高度为 40 像素(px)

 

然后在 App.vue 里面添加一个样式，它就会被挤下来

       

 

 

三、制作项目首页的底部Tabbar

 

MUI 的基本使用

刚刚讲的 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 右键用浏览打开，然后右键检查，如下右图：

         

 

那么怎么使用这个 tabbar ？

我们就把它当作为 bootstrap 的一个快速代码片段，右键显示网页源代码

      

 

然后复制对应的，上图的代码到项目 App.vue 中，运行的效果如下：

     

 

效果有点丑，我们还需要在项目 Main.js 中，导入 MUI 的样式

 

然后运行结果如下图：