目錄：
vue組件系列課程簡介
頁面結(jié)構(gòu)介紹
安裝vue，vue-cli，
安裝vant UI框架
導(dǎo)入組件
各頁面代碼詳情
Layout布局介紹
總結(jié)
vue組件系列課程簡介：
這一套組件系列課程主要介紹我們項目開發(fā)過程當(dāng)中經(jīng)常遇到的各種組件集錦。當(dāng)我們學(xué)習(xí)完這一套課程后端衰，我們對VUE的應(yīng)用就會更加游刃有余了许赃，成為“別人家的前端”：）
我們上一季的最后一節(jié)課做了個引子，將vue中如何使用vant做了一下介紹胰蝠。這一套課程的UI部分也依舊會延用vant。當(dāng)我們熟練使用一種UI框架后，開發(fā)項目的效率就會大大地提高茸塞。況且這套框架還不錯不是嗎躲庄？為我們提供了大量的組件供我們應(yīng)用。
頁面結(jié)構(gòu)：
我們將在App.vue創(chuàng)建router-view钾虐，默認(rèn)顯示的是views文件夾里的index.vue噪窘。
views文件夾里存放組件演示的頁面。index.vue是組件集合的導(dǎo)般頁面效扫。
除了vant的封裝組件外倔监，所有組件都將存放在components文件夾里。
router.js集合了各種路由菌仁。
所以浩习，今后的課程都是按照這個套路，關(guān)于創(chuàng)建組件以及修改路徑等自行修改處理济丘。我們會以vant里的基礎(chǔ)組件入手谱秽，逐漸深入復(fù)雜組件，自定義組件等摹迷。
我們將這套教程將是一套組件集錦疟赊，也相當(dāng)于是一個較完整的小項目，那么我們就從vue安裝開始講起峡碉。馬上出發(fā)近哟！
安裝vue，vue-cli
如果是ios系統(tǒng)鲫寄，需要加上sudo
sudo cnpm install vue @vue-cli -g
安裝vant UI框架：
cnpm install vant –-save-dev
導(dǎo)入組件-在main.js里：
import Vant from 'vant';
import'vant/lib/vant-css/index.css';
Vue.use('Vant')
我們先將各頁面的代碼填充完吉执。具體各頁面的代碼如下：
- App.vue里DOM如下：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
- index.vue里DOM如下，這個頁面的布局就是應(yīng)用了vant的布局塔拳，大家不懂沒關(guān)系鼠证，我們先將框架寫出來，之后再來解釋：
<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>
- Layout.vue靠抑，第一個要學(xué)習(xí)的組件量九，其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>
構(gòu)造函數(shù)方法如下：
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)是第一季學(xué)的基礎(chǔ)內(nèi)容颂碧。沒有印象的寶寶可以返回去學(xué)習(xí)學(xué)習(xí)呦荠列。這里的布局就是vant的布局，我們暫且不用管他們是什么意思载城。
- 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布局介紹：
項目開發(fā)中使用頻率相當(dāng)高的就是Layout布局，也是各種頁面的基礎(chǔ)诉瓦。Vant的這個布局組件提供了van-row(行)和van-col(列)兩個組件來進(jìn)行行列布局川队。Layout組件提供了24列柵格力细，通過在Col上添加span屬性設(shè)置列所占的寬度百分比。Offset屬性可以設(shè)置列的偏移寬度固额，計算方式與span相同眠蚂。列之間的間距則用gutter屬性。
基本用法：
<van-row>
<van-col span=”8”></van-col>
<van-col span=”8”offset=”8”></van-col>
</van-row>
Flex布局：
我們在項目開發(fā)中呢斗躏，會經(jīng)常遇到列對齊的情況逝慧，這種情況下呢，我們通常會用flex布局啄糙。Vant也為我們封裝了flex布局笛臣，我們可以直接用，很方便隧饼。Layout.vue頁面用的就是flex布局沈堡。
Flex布局用法：
Flex布局是我們最經(jīng)常用到的布局，將type設(shè)置成flex桑李，即為flex布局踱蛀。橫向的對齊方式是設(shè)置justify屬性，豎向的對齊方式是設(shè)置align屬性贵白。justify="space-around"則是每個元素兩側(cè)間隔相等。
需要注意的一點是：justify="space-around"需要將span屬性小于24,否則不起作用的崩泡。
Tag屬性：
不管是van-row還是van-col都有個tag屬性禁荒，這個tag屬性可以自定義標(biāo)簽责静，就是可以將所在的DOM標(biāo)簽換成其它的標(biāo)簽淘菩。假設(shè)我們在van-row上設(shè)置tag=”a”，我們在控制面板里看它的元素會變成a標(biāo)簽季春，如圖：
總結(jié)：
Layout布局組件就介紹到這里谒所。因為vant已經(jīng)為我們封裝好热康，我們直接用就可以了，很簡單方便劣领。Vant的組件的標(biāo)簽前綴是van姐军，其它基本上與其它框架類似，所以學(xué)起來還蠻容易的尖淘。
因為是第一節(jié)奕锌，可能會講得比較細(xì)一些，比較羅嗦一些村生，下節(jié)課將會簡練一些惊暴。雖然這節(jié)課很簡單，但如果不自己動手做一下趁桃，永遠(yuǎn)不知道我們學(xué)到什么程度辽话，永遠(yuǎn)不知道我們中途會遇到什么問題肄鸽。
我們休息，休息一下油啤，明天繼續(xù)加油噢贴捡！
