Vue.js+Koa2移动电商实战4

Posted 2020-11-08 小凡的耿

首页布局和路由设置

　　这节开始布局首页，课程采用先静后动的原则，就是先用静态数据代替，然后使用Mock模拟数据，最后上真实的接口。这样的好处是，可以满足不同阶段不同岗位的小伙伴动能愉快的上手项目。

　　这节课的三个基础知识：
　　　　1. 首页路由的配置：这个如果有基础可以跳过学习的。
　　　　2. 建立首页组件（components）：先把首页组件建立起来。
　　　　3. 讲解Vant的布局方法：我希望我这节课CSS的比重不占太多的课程内容，所以为了尽量少的涉及CSS，我们引入了第三方样式组件库。

　　user-scalable设置

　　先补一个上节课忘记加入的属性，在作移动端页面适配时，一般我们不希望用户自己缩放页面大小，我们可以在index.html的meta标签进行设置，加入user-scalable=no。

　首页路由的配置

　　打开路由配置页面：src/router/index.js,先删除vue-cli自动生成的HelloWorld.vue的配置,然后加入我们的路由配置.

import Vue from ‘vue‘
import Router from ‘vue-router‘
import ShoppingMall from ‘@/components/pages/ShoppingMall‘
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {path: ‘/‘,name: ‘ShoppingMall‘,component: ShoppingMall}
  ]
})

　　这里的@代表的是项目的src目录。

　建立首页组件

　　删除HelloWorld.vue文件，建立ShoppingMall.vue文件。编写如下代码：

 
<template>
  <div>
      {{msg}}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      msg: ‘Shopping Mall‘
    }
  }
}
</script>

　Vant布局讲解

　　使用Vant的布局需要先进行按需引入，我们直接在/scr/main.js里引入Row和Col组件。

import { Button, Row, Col } from ‘vant‘
Vue.use(Button).use(Row).use(Col)

　　他的布局是采用24格布局法，简单的理解，就是把页面均匀的分成24等分，然后我们控制这24个等分的比例就可以实现布局。

<van-row>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
    <van-col span="8">span: 8</van-col>
</van-row>