① 尚品汇的前台开发笔记【尚硅谷】【Vue】_一小时学会简单前台开发

文章目录

• 一、采用vue-cli去初始化项目
• 二、项目的其他配置
• 三、项目路由的分析
• 四、完成非路由组件Header与Footer业务
• • 开发项目的步骤
  • 使用组件的步骤（非路由组件）
  • 完成路由组件的搭建
  • Footer组件显示与隐藏
  • 路由传参
  • 路由传参相关面试题
  • 解决问题
• 五、完成Home首页模块业务
• • 开发项目的步骤
  • 完成Home首页拆分静态组件
  • • 完成TypeNav 三级联动组件--全局组件
    • 完成其余静态组件--局部组件
  • POSTMAN测试接口是否正常
  • axios二次封装
  • 接口统一管理
  • nprogress进度条的使用
  • vuex状态管理库
  • 完成TypeNav三级联动
  • • 完成TypeNav三级联动展示数据业务
    • 完成一级分类动态添加背景颜色
    • 通过JS控制二三级商品分类的显示与隐藏
    • 函数的防抖和节流
    • 完成三级联动节流的操作
    • 完成三级联动组件的路由跳转与传递参数
    • Search模块中商品分类的显示与隐藏
    • TypeNav商品分类列表的优化
    • 合并params与query参数
  • 开发Home首页当中的ListContainer组件与Floor组件
  • • 获得ListContainer组件的mock模拟数据
    • listContainer轮播图
    • 开发floor组件
    • 组件通信的方式有哪些？
    • 将首页的轮播图封装为全局组件
• 六、完成Search搜索模块业务
• • search模块vuex操作
  • • 发起api请求
    • vuex 把数据放到store仓库
    • 让组件拿到仓库的数据
    • Search模块中动态展示产品列表
    • search模块根据不同的参数获取数据展示
  • search模块子组件的动态开发
  • Search面包屑开发
  • • Search面包屑处理分类的操作
    • 面包屑处理关键字
    • 面包屑处理品牌信息
  • Search的子组件平台售卖属性的操作
  • Search模块的排序操作（重点）
  • 分页器功能分析（重点）
  • • 分页器静态组件
    • 分页功能分析
    • 分页器起始与结束数字计算
    • 分页器动态展示
    • 替换数据
    • 分页器添加类名
• 七、完成Detail某一个产品的详情页面
• • 配置详情 路由 src/router/index.js
  • • 滚动行为
  • 产品详情数据获取
  • • api--请求接口
    • vuex--获取产品详情信息给仓库
    • 发请求捞数据
  • 产品详情展示动态数据
  • Zoom放大镜操作
  • • Zoom放大镜展示数据
    • 放大镜下的轮播图数据展示
    • 放大镜轮播图操作
    • 放大镜
      声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/907081