不積跬步無以至千里

因為不熟悉，每次整理都花費了不短的時間虾啦，現(xiàn)在以碼代碼為主麻诀，到每個階段再整理痕寓。
本次整理內(nèi)容
--- 底部導(dǎo)航顯示
----- 給谷歌瀏覽器安裝vue調(diào)試插件
--- 各模塊的靜態(tài)頁面搭建完成
--- 添加登錄頁靜態(tài)頁面與路由

0. 其它

vue實戰(zhàn)（1）：準(zhǔn)備與資料整理
vue實戰(zhàn)（2）：初始化項目、搭建底部導(dǎo)航路由
vue實戰(zhàn)（3）：底部導(dǎo)航顯示蝇闭、搭建各模塊靜態(tài)頁面呻率、添加登錄頁頁面與路由
vue實戰(zhàn)（4）：postman測試數(shù)據(jù)、封裝ajax呻引、使用vuex管理狀態(tài)
vue實戰(zhàn)（5）：總結(jié)一
vue實戰(zhàn)（6）：異步顯示數(shù)據(jù)礼仗、開發(fā)Star組件
vue實戰(zhàn)（7）：完整開發(fā)登錄頁面（一）
vue實戰(zhàn)（8）：完整開發(fā)登錄頁面（二）
vue實戰(zhàn)（9）：總結(jié)二
vue實戰(zhàn)（10）：開發(fā)店鋪詳情（一）
vue實戰(zhàn)（11）：開發(fā)店鋪詳情（二）
vue實戰(zhàn)（12）：完結(jié) + 附學(xué)習(xí)視頻

1. 底部導(dǎo)航顯示

完成的底部樣式

• 底部導(dǎo)航結(jié)構(gòu)

 |-- components                                - 非路由組件文件夾
         |---- FooterGuide                     - 底部組件文件夾
                |---- FooterGuide.vue          - 底部組件

• 搭建靜態(tài)頁面與添加css樣式

<!--以首頁模塊為例，其余模塊結(jié)構(gòu)相同-->
<div class="footer_guide">
 <!--外賣-->
   <span class="guide_item" :class="{on: '/Msite' === $route.path}" @click="goto('/Msite')">
      <span class="item_icon">
        <i class="iconfont iconshop"></i>
      </span>
      <span>外賣</span>
    </span>
  <!--搜索-->
    <span>
      ……
    </span>
</div>

• 使用icon,矢量圖標(biāo)
  前面在阿里巴巴矢量圖庫整理的圖標(biāo)在這邊使用逻悠，<i class="iconfont iconshop"></i>
  以外部鏈接形式應(yīng)用元践，使用時添加class即可，iconfont為固定class,iconshop為圖標(biāo)的名字童谒，直接在網(wǎng)頁上粘貼復(fù)制過來防止出錯单旁。
• 使用對象語法:class="{class名: boolean}"
  對象語法的作用是判斷在class確定的情況下，是否需要惠啄。這里強(qiáng)制綁定class='on',是在切換時顏色也會變化慎恒。

+為瀏覽器安裝Vue.js devtools插件

- 打開谷歌插件商城任内，添加 Vue.js devtools 插件撵渡，便于調(diào)試
- 無法打開插件商城，百度搜索下載 '谷歌商城助手' 安裝
- 如下載好 .crx 文件安裝失敗或者無法安裝等問題死嗦，把文件后綴名改成 .zip 趋距，解壓縮后再在瀏覽器擴(kuò)展程序頁面進(jìn)行導(dǎo)入

• 添加點擊事件@click="goto('/Msite')"

export default {
  name: 'FooterGuide',
  methods: {
    goto (path) {
      this.$router.replace(path)
    }
  }
}

• $route與$router
  鏈接：vue-router中$route 和$router

• 鏈接：$route 詳解

• 在App.vue中引入

<template>
  <div id="app">
    <router-view></router-view>
    <FooterGuide v-if="$route.meta.showFooter"></FooterGuide>
  </div>
</template>

<script>
import FooterGuide from './components/FooterGuide/FooterGuide'
export default {
  name: 'App',
  components: {
    FooterGuide
  }
}
</script>

• 測試
  npm run serve 啟動，點擊切換成功
  
  首頁頁面

搜索頁面

訂單頁面

個人頁面

2. 搭建各模塊靜態(tài)頁面

• 引用css時候越除，有一個坑
  寫項目時节腐，發(fā)現(xiàn)在index.html中引入<link rel="stylesheet" href="/static/css/reset.css">公用css沒有效果，我重新在main.js中引入import '../static/css/reset.css'才有效果摘盆，具體原因沒有仔細(xì)的去找原因翼雀，以后找找原因再整理。
• 模塊結(jié)構(gòu)

 |-- views                                - 結(jié)構(gòu)布局文件夾
         |---- Msite                     - 首頁組件文件夾
                |---- Msite.vue          - 首頁組件
         |---- Search                     - 搜索組件文件夾
                |---- Search.vue          - 搜索組件
         |---- Order                     - 訂單組件文件夾
                |---- Order.vue          - 訂單組件
         |---- Profile                     - 個人組件文件夾
                |---- Profile.vue          - 個人組件
         |---- Login                      - 登錄組件文件夾
                |---- Login.vue          - 登錄組件

• 搭建各模塊靜態(tài)頁面與添加css樣式
• 搭建完成后孩擂，提取頭部組件
  components文件夾下添加HeaderTop文件夾并添加HeaderTop.vue
• 頭部組件使用 '插槽' 傳值 <slot name="插槽名"></slot>

<template>
  <header class="header">
    <slot name="left"></slot>

    <span class="header_title">
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>

    <slot name="right"></slot>
  </header>
</template>

<script>
export default {
  name: 'HeaderTop',
  props: {
    title: String
  }
}
</script>

• 各模塊頭部組件替換
  '插槽' 還不怎么會使用狼渊，不過不是很難，使用起來問題不大类垦。主要是router-link標(biāo)簽狈邑，slot="指定插槽名"與to="跳轉(zhuǎn)路由"

<!--以首頁頭部為例，其它相同類似-->
    <HeaderTop title="昌平區(qū)北七家宏冈槿希科技園(337省道北)">
      <router-link class="header_search" slot="left" to="">
        <i class="iconfont iconfangdajing"></i>
      </router-link>
      <router-link class="header_login" slot="right" to="">
        <span class="header_login_text">登錄|注冊</span>
      </router-link>
    </HeaderTop>

• 抽取商店列表為單獨組件
  --components文件夾下添加ShopList文件夾并添加ShopList.vue
  --抽取頁面與css
  --在Msite引入
• 使用Swiper對首頁頁面圖片中的2部分進(jìn)行改造
  Swiper為輪播插件米苹，看了官網(wǎng)文檔，現(xiàn)在已經(jīng)支持vue了砰琢，官方文檔
  ---在項目中添加依賴npm install vue-awesome-swiper --save
  ---main.js中引用并使用import VueAwesomeSwiper from 'vue-awesome-swiper'蘸嘶，Vue.use(VueAwesomeSwiper)
  ---在使用的地方引用cssimport 'swiper/dist/css/swiper.css'
  照著文檔傻瓜式的操作后良瞧，輪播完成

methods: {
    _initSwiper () {
      new Swiper('.swiper-container', {
        loop: true, // 循環(huán)模式選項
        pagination: {
          el: '.swiper-pagination'
        }
      })
    }
  },
  mounted () {
    this._initSwiper()
  }

3. 添加登錄頁

• 搭建登錄頁靜態(tài)頁面與添加css樣式
• 要求點擊個人頁面圖片上的登錄/注冊，進(jìn)入Login頁面
• 在router.js中配置login路由import Login from '../views/Login/Login'训唱，{ path: '/login', component: Login }
• 在Profile.vue中改造標(biāo)簽為router-link并添加路由to="/login"莺褒，實現(xiàn)跳轉(zhuǎn)
• 去除登錄頁導(dǎo)航欄
  對App.vue中的FooterGuide標(biāo)簽進(jìn)行判斷<FooterGuide v-if="$route.meta.showFooter"> </FooterGuide>
• router.js中對各模塊路由進(jìn)行配置，在需要顯示導(dǎo)航欄的頁面路由添加meta屬性

{
      path: '/Msite', // 首頁
      component: Msite,
      meta: {
        showFooter: true
      }
    }

登錄頁面

• 去除成功雪情，在回退按鈕添加返回@click="$router.back()"

4. 結(jié)束

• 目前為止遵岩，頁面的布置與路由搭建，基本的框架差不多完成

  
  
  目前目錄結(jié)構(gòu)

接下來就是接入數(shù)據(jù)階段了巡通，頁面也需要重構(gòu)

點個贊唄尘执！