vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由

不积跬步无以至千里

因为不熟悉，每次整理都花费了不短的时间，现在以码代码为主，到每个阶段再整理。
本次整理内容
--- 底部导航显示
----- 给谷歌浏览器安装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. 结束

• 目前为止，页面的布置与路由搭建，基本的框架差不多完成
  

接下来就是接入数据阶段了，页面也需要重构