VUE仿猫眼电影总结（一）

概述

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

界面展示

项目结构

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

功能汇总

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