Vue笔记整理，09.项目-制作项目首页的Header和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 的容器里面

 

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

Mint UI官方地址：https://mint-ui.github.io/#!/zh-cn

进入官网--->开始使用--->中文（Vue 2.0 版）

command + f ，搜索 Header，回车

左侧的 Header 点击进去可看具体的代码实现

右侧的 Header 点击进去可看预览效果

 

要使用 Mint UI 的组件，需要按需导入 Mint-UI 中的组件

import { Header } from 'mint-ui'
Vue.component(Header.name, Header)

更新中。。。