这个项目对于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效果实现
- 递归组件实现详情列表
- 画廊动画效果封装
网友评论