不积跬步无以至千里
因为不熟悉，每次整理都花费了不短的时间，现在以码代码为主，到每个阶段再整理。
本次整理内容
--- 底部导航显示
----- 给谷歌浏览器安装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）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频
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. 结束
-
目前为止，页面的布置与路由搭建，基本的框架差不多完成
目前目录结构
接下来就是接入数据阶段了，页面也需要重构
点个赞呗！
