travel

A mobile web project on Vue.js

demo地址：https://tedqin.github.io/Travel/

仿某旅游网站的移动端webapp页面

启动

# 安装依赖
npm install

# 本地端口启动
npm run start

# 打包
npm run build

组件

home
- Header 头部
- Icon 原型图标区域
- Recommend 推荐
- Swiper 图片轮播
- Weekend 周末推荐
city
- Header 头部
- Alphabet 右侧城市首字母下拉列表
- List 城市列表
- Search 搜索
detail
- Header 头部
- Banner 主页面
- List 图片详情页的轮播

用到的功能和插件

webpack
axios 发送ajax请求
vue-awesome-swiper 轮播图插件
betterscroll 滚动插件，贴近真实的移动端手指滑动
vuex 进行home和city页面的数据交互，在city页面选择城市，home页面的城市会改变，并且使用router.push自动跳转到home页面
localstorage 自动缓存，刷新页面的时候已经选择的城市不发生改变
keepalive 优化问题：防止切换页面会发生多次ajax请求
异步组件加载：按需加载组件