目录：
vue组件系列课程简介
页面结构介绍
安装vue，vue-cli，
安装vant UI框架
导入组件
各页面代码详情
Layout布局介绍
总结
vue组件系列课程简介：
这一套组件系列课程主要介绍我们项目开发过程当中经常遇到的各种组件集锦。当我们学习完这一套课程后，我们对VUE的应用就会更加游刃有余了，成为“别人家的前端”：）
我们上一季的最后一节课做了个引子，将vue中如何使用vant做了一下介绍。这一套课程的UI部分也依旧会延用vant。当我们熟练使用一种UI框架后，开发项目的效率就会大大地提高。况且这套框架还不错不是吗？为我们提供了大量的组件供我们应用。
页面结构：
我们将在App.vue创建router-view，默认显示的是views文件夹里的index.vue。
views文件夹里存放组件演示的页面。index.vue是组件集合的导般页面。
除了vant的封装组件外，所有组件都将存放在components文件夹里。
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';
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如下，这个页面的布局就是应用了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>
- 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的布局，我们暂且不用管他们是什么意思。
- 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标签，如图：
总结：
Layout布局组件就介绍到这里。因为vant已经为我们封装好，我们直接用就可以了，很简单方便。Vant的组件的标签前缀是van，其它基本上与其它框架类似，所以学起来还蛮容易的。
因为是第一节，可能会讲得比较细一些，比较罗嗦一些，下节课将会简练一些。虽然这节课很简单，但如果不自己动手做一下，永远不知道我们学到什么程度，永远不知道我们中途会遇到什么问题。
我们休息，休息一下，明天继续加油噢！
