Vue.js+Koa2移動電商實戰4

標籤：知識   刪除   目的   代碼   router   span   使用者   就是   介面   

首頁布局和路由設定

　　這節開始布局首頁，課程採用先靜後動的原則，就是先用待用資料代替，然後使用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>

 

Vue.js+Koa2移動電商實戰4