vue2.x+koa2实战电商（四）

首页布局和路由设置

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>

效果如下：

这节课就是一个对页面分割的练习，下节课将正式开始页面布局操作。