首页布局和路由设置
user-scalable设置
先补一个上节课忘记加入的属性，在作移动端页面适配时，一般我们不希望用户自己缩放页面大小，我们可以在index.html的meta标签进行设置，加入user-scalable=no。
然后把src/router/index.js 改为：
import Vue from 'vue'
import Router from 'vue-router'
import shoppingMail from '@/components/pages/shoppingMail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'shoppingMail',
component: shoppingMail
}
]
})
在根目录的src/components下建立一个pages文件夹用于放页面编辑代码，建立一个shoppingMail.vue文件，当然你可以随意取名
<template>
<div>
<van-row class="test-row">
<van-col span="8">span:4</van-col>
<van-col span="8">span:8</van-col>
<van-col span="8">span:8</van-col>
</van-row>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
.test-row{
text-align: center;
}
</style>
效果如下：
这节课就是一个对页面分割的练习，下节课将正式开始页面布局操作。