VUE仿猫眼电影总结(一)

概述

界面展示

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

项目结构

  • 页面结构主要分为页面级组件和通用组件,页面级的主要用于底部栏切换不同页面,通用组件有顶部栏、底部栏和滑动组件等
  • 路由新建了一个文件夹,每个页面的路由分开写,以模块形式导出,汇总在一个文件中引用,以免页面过多时路由文件混乱
  • 通用的css文件放在public文件夹中和index.html同级
  • 字体图标放在assets文件夹中
  • App.vue中只写顶级路由插座,渲染内容

功能汇总

  • Flex布局,使用阿里字体图标库
  • 城市列表:本地存储
  • 城市切换:状态管理
  • 城市索引:offsetTop + scrollTop
  • 接口数据获取:axios
  • 数据格式预处理:过滤器
  • 二级菜单:子路由
  • 详情页:命名视图 + 动态路由
  • 搜索页面:函数防抖
  • 滑动效果:better-scroll插件
  • 反向代理:新增vue.config.js解决跨域
  • 0
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值