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）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 底部导航显示

完成的底部样式

底部导航结构

 |-- components                                - 非路由组件文件夹
         |---- FooterGuide                     - 底部组件文件夹
                |---- FooterGuide.vue          - 底部组件

搭建静态页面与添加css样式

使用icon,矢量图标
前面在阿里巴巴矢量图库整理的图标在这边使用，
以外部链接形式应用，使用时添加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
链接：$route 详解

在App.vue中引入

测试
npm run serve 启动，点击切换成功

首页页面

搜索页面

订单页面

个人页面

2. 搭建各模块静态页面

引用css时候，有一个坑
写项目时，发现在index.html中引入公用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
头部组件使用 '插槽' 传值

各模块头部组件替换
'插槽' 还不怎么会使用，不过不是很难，使用起来问题不大。主要是router-link标签，slot="指定插槽名"与to="跳转路由"

抽取商店列表为单独组件
--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标签进行判断
router.js中对各模块路由进行配置，在需要显示导航栏的页面路由添加meta属性

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

登录页面

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

4. 结束

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

目前目录结构

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

点个赞呗！