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. 结束

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


    目前目录结构
接下来就是接入数据阶段了,页面也需要重构
点个赞呗!

你可能感兴趣的:(vue实战(3):底部导航显示、搭建各模块静态页面、添加登录页页面与路由)