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

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

目录

一、项目首页分析

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

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

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

Mint UI 的基本使用

查看 Header 宽高像素

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

MUI 的基本使用

那么怎么使用这个 tabbar ？

---

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

 

一、项目首页分析

 

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

第一部分：

第二部分：

第三部分：

 

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

 

查看 Header 宽高像素

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

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

 

然后在 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 的样式

 

然后运行结果如下图：