vue2組件系列第一節：Layout布局

目錄：

vue組件系列課程簡介

頁面結構介紹

安裝vue，vue-cli，

安裝vant UI框架

導入組件

各頁面代碼詳情

Layout布局介紹

總結

vue組件系列課程簡介：

這一套組件系列課程主要介紹我們項目開發過程當中經常遇到的各種組件集錦。當我們學習完這一套課程後，我們對VUE的應用就會更加遊刃有餘了，成為「別人家的前端」：）

我們上一季的最後一節課做了個引子，將vue中如何使用vant做了一下介紹。這一套課程的UI部分也依舊會延用vant。當我們熟練使用一種UI框架後，開發項目的效率就會大大地提高。況且這套框架還不錯不是嗎？為我們提供了大量的組件供我們應用。

頁面結構：

1. 我們將在App.vue創建router-view，默認顯示的是views文件夾里的index.vue。

2. views文件夾里存放組件演示的頁面。index.vue是組件集合的導般頁面。

3. 除了vant的封裝組件外，所有組件都將存放在components文件夾里。

4. router.js集合了各種路由。

所以，今後的課程都是按照這個套路，關於創建組件以及修改路徑等自行修改處理。我們會以vant里的基礎組件入手，逐漸深入複雜組件，自定義組件等。

我們將這套教程將是一套組件集錦，也相當於是一個較完整的小項目，那麼我們就從vue安裝開始講起。馬上出發！

安裝vue，vue-cli

如果是ios系統，需要加上sudo

sudo cnpm install vue @vue-cli -g

安裝vant UI框架：

cnpm install vant –-save-dev

導入組件-在main.js里：

import Vant from vant; importvant/lib/vant-css/index.css; Vue.use(Vant)

我們先將各頁面的代碼填充完。具體各頁面的代碼如下：

1. App.vue里DOM如下：

<template> <div id="app"> <router-view></router-view> </div> </template>

2. index.vue里DOM如下，這個頁面的布局就是應用了vant的布局，大家不懂沒關係，我們先將框架寫出來，之後再來解釋：

<template> <div id="index"> <van-row> <a href="javascript:void(0)" @click="$router.push(/layout)"> <van-col span="6"> <van-icon name="wap-nav" /> <div>布局</div> </van-col> </a> <van-col span="6"></van-col> <van-col span="6"></van-col> <van-col span="6"></van-col> </van-row>

</div>
</template>

3. Layout.vue，第一個要學習的組件，其DOM如下：

<template> <div class="layout"> <div class="arrow-left"> <van-icon name="arrow-left" @click="goback" /> </div> <van-row type="flex"> <van-col span="8" class="left" tag="a">span: 8</van-col> <van-col span="8" class="center">span: 8</van-col> <van-col span="8" class="right">span: 8</van-col> </van-row> </div> </template>

構造函數方法如下：

methods: { goback() { this.$router.go(-1) } }

css如下：

.left { background-color: #9dcff9; } .center { background-color: #5fb3fa; } .right { background-color: #2197fb; } .arrow-left { margin: 20px; text-align: left; }

這裡為每個組件的頭部配置一個返回的箭頭按鈕。this.$router.go(-1)是第一季學的基礎內容。沒有印象的寶寶可以返回去學習學習呦。這裡的布局就是vant的布局，我們暫且不用管他們是什麼意思。

4. router.js里配置如下，主要配置了index和layout兩個路由

import Vue from vue import Router from vue-router

Vue.use(Router)

export default new Router({
routes: [
{
path: /,
name: index,
component: () => import(./views/index.vue)
},
{
path: /layout,
name: layout,
component: () => import(./components/Layout.vue)
}
]
})

Layout布局介紹：

項目開發中使用頻率相當高的就是Layout布局，也是各種頁面的基礎。Vant的這個布局組件提供了van-row(行)和van-col(列)兩個組件來進行行列布局。Layout組件提供了24列柵格，通過在Col上添加span屬性設置列所佔的寬度百分比。Offset屬性可以設置列的偏移寬度，計算方式與span相同。列之間的間距則用gutter屬性。

基本用法：

<van-row> <van-col span=」8」></van-col> <van-col span=」8」offset=」8」></van-col> </van-row>

Flex布局：

我們在項目開發中呢，會經常遇到列對齊的情況，這種情況下呢，我們通常會用flex布局。Vant也為我們封裝了flex布局，我們可以直接用，很方便。Layout.vue頁面用的就是flex布局。

Flex布局用法：

Flex布局是我們最經常用到的布局，將type設置成flex，即為flex布局。橫向的對齊方式是設置justify屬性，豎向的對齊方式是設置align屬性。justify="space-around"則是每個元素兩側間隔相等。

需要注意的一點是：justify="space-around"需要將span屬性小於24,否則不起作用的。

Tag屬性：

不管是van-row還是van-col都有個tag屬性，這個tag屬性可以自定義標籤，就是可以將所在的DOM標籤換成其它的標籤。假設我們在van-row上設置tag=」a」，我們在控制面板里看它的元素會變成a標籤，如圖：