不積跬步無以至千里
因為不熟悉，每次整理都花費了不短的時間，現在以碼代碼為主，到每個階段再整理。
本次整理內容
--- 底部導航顯示
----- 給谷歌瀏覽器安裝vue調試插件
--- 各模塊的靜態頁面搭建完成
--- 添加登錄頁靜態頁面與路由
0. 其它
vue實戰（1）：准備與資料整理
vue實戰（2）：初始化項目、搭建底部導航路由
vue實戰（3）：底部導航顯示、搭建各模塊靜態頁面、添加登錄頁頁面與路由
vue實戰（4）：postman測試數據、封裝ajax、使用vuex管理狀態
vue實戰（5）：總結一
vue實戰（6）：異步顯示數據、開發Star組件
vue實戰（7）：完整開發登錄頁面（一）
vue實戰（8）：完整開發登錄頁面（二）
vue實戰（9）：總結二
vue實戰（10）：開發店鋪詳情（一）
1. 底部導航顯示
- 底部導航結構
|-- components - 非路由組件文件夾
|---- FooterGuide - 底部組件文件夾
|---- FooterGuide.vue - 底部組件
- 搭建靜態頁面與添加css樣式
<!--以首頁模塊為例，其余模塊結構相同-->
<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,矢量圖標
前面在阿里巴巴矢量圖庫整理的圖標在這邊使用，<i class="iconfont iconshop"></i>
以外部鏈接形式應用，使用時添加class即可，iconfont為固定class,iconshop為圖標的名字，直接在網頁上粘貼復制過來防止出錯。 - 使用對象語法
:class="{class名: boolean}"
對象語法的作用是判斷在class確定的情況下，是否需要。這里強制綁定class='on',是在切換時顏色也會變化。
+為瀏覽器安裝Vue.js devtools插件
- 打開谷歌插件商城，添加 Vue.js devtools 插件，便於調試
- 無法打開插件商城，百度搜索下載 '谷歌商城助手' 安裝
- 如下載好 .crx 文件安裝失敗或者無法安裝等問題，把文件后綴名改成 .zip ，解壓縮后再在瀏覽器擴展程序頁面進行導入
- 添加點擊事件
@click="goto('/Msite')"
export default {
name: 'FooterGuide',
methods: {
goto (path) {
this.$router.replace(path)
}
}
}
$route與$router
鏈接：vue-router中$route和$router- 在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. 搭建各模塊靜態頁面
- 引用css時候，有一個坑
寫項目時，發現在index.html中引入<link rel="stylesheet" href="/static/css/reset.css">公用css沒有效果，我重新在main.js中引入import '../static/css/reset.css'才有效果，具體原因沒有仔細的去找原因，以后找找原因再整理。 - 模塊結構
|-- views - 結構布局文件夾
|---- Msite - 首頁組件文件夾
|---- Msite.vue - 首頁組件
|---- Search - 搜索組件文件夾
|---- Search.vue - 搜索組件
|---- Order - 訂單組件文件夾
|---- Order.vue - 訂單組件
|---- Profile - 個人組件文件夾
|---- Profile.vue - 個人組件
|---- Login - 登錄組件文件夾
|---- Login.vue - 登錄組件
- 搭建各模塊靜態頁面與添加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標簽，slot="指定插槽名"與to="跳轉路由"
<!--以首頁頭部為例，其它相同類似-->
<HeaderTop title="昌平區北七家宏福科技園(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部分進行改造
Swiper為輪播插件，看了官網文檔，現在已經支持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, // 循環模式選項
pagination: {
el: '.swiper-pagination'
}
})
}
},
mounted () {
this._initSwiper()
}
3. 添加登錄頁
- 搭建登錄頁靜態頁面與添加css樣式
- 要求點擊個人頁面圖片上的登錄/注冊，進入Login頁面
- 在router.js中配置login路由
import Login from '../views/Login/Login'，{ path: '/login', component: Login } - 在Profile.vue中改造標簽為
router-link並添加路由to="/login"，實現跳轉 - 去除登錄頁導航欄
對App.vue中的FooterGuide標簽進行判斷<FooterGuide v-if="$route.meta.showFooter"> </FooterGuide> - router.js中對各模塊路由進行配置，在需要顯示導航欄的頁面路由添加
meta屬性
{
path: '/Msite', // 首頁
component: Msite,
meta: {
showFooter: true
}
}
- 去除成功，在回退按鈕添加返回
@click="$router.back()"
4. 結束
- 目前為止，頁面的布置與路由搭建，基本的框架差不多完成
接下來就是接入數據階段了，頁面也需要重構
