运行项目

• npm install
• npm run dev

项目展示

项目涉及到技术栈：

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

主要特点

• 组件化自适应布局
• 代码，简洁，易维护
• 兼容大部分浏览器
• 性能优化

项目结构部分

Header部分

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

城市选择页面开发

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

详情页面开发

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

项目源码