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)

更新中。。。