这个项目对于vue入门和入门提升，而且对移动端布局和性能优化有很大帮助和提升

接口是模拟json地址，虽然不能操作json，可以直接调用

• npm install
• npm run dev

项目即可运行

项目展示

gif

项目涉及到技术栈：

vue：Vue、Vue-router、Vuex、Vue-cli
插件：vue-awesome-swiper、better-scroll Axios
CSS的预处理框架 stylus
模拟api 调用后台数据接口

主要特点

• 组件化自适应布局
• 代码，简洁，易维护
• 兼容大部分浏览器
• 性能优化（函数节流，keep alive等等）

项目结构部分

Header部分

• 引入 Iconfont
• 首页轮播
• 图标区域轮播
• 使用axios获取接口数据
• 组件间数据传递

城市选择页面开发

• Better-scroll的使用和字母表布局
• eventbus 传值
• 列表性能优化
• 搜索逻辑实现
• Vuex实现数据共享
• LocalStorage实现页面数据持久存储
• 使用keep-alive优化路由页面性能

详情页面开发

• 动态路由配置及banner布局
• 公用画廊组件拆分
• 渐隐渐显的header效果实现
• 递归组件实现详情列表
• 画廊动画效果封装

项目源码