VUE仿猫眼电影总结(一)

概述

  • vue进阶练习
  • 基于vue-cli 3.0脚手架构建的
  • 仿猫眼webapp
  • github地址:https://github.com/santana2000/hah-movie

界面展示

VUE仿猫眼电影总结(一)_第1张图片VUE仿猫眼电影总结(一)_第2张图片
VUE仿猫眼电影总结(一)_第3张图片VUE仿猫眼电影总结(一)_第4张图片

项目结构

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

功能汇总

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

你可能感兴趣的:(VUE)