Vue仿制移动端去哪儿网

一个基于Vue的仿制移动端去哪儿网的练习项目

项目截图

首页

城市搜索页

景点详情页

技术栈

• Vue： 项目开发
• Vue-router: 多页面之间的路由
• Vuex：各组件之间的数据共享
• Vue-cli：项目构建
• Axios：Ajax数据的获取
• Stylus：编写前端样式
• 插件：用swiper实现轮播效果

数据来源

该项目所有的数据（景区名，价格，图片，评论等）都是用GoWhere-Crawler爬虫工具从移动端去哪儿网爬取的，生成的JSON文件放在/static/mock文件夹中

实现的功能

首页

• 多区域轮播
• 多区域列表循环展示

城市搜索页

• 选择城市
• 城市搜索
• 右侧字母与左侧城市块的动画联动效果

景点详情页(目前只做了 首页-猜你喜欢 栏目的景点详情页 )

• 公共画廊组件（点开景点图片即可看到）
• 渐隐渐现的header组件
• 用户评论组件（功能未完全实现）

使用方法

# 克隆到本地
git clone [email protected]:Jacleklm/GoWhere.git

# 定位到该文件夹
cd GoWhere

# 安装依赖
npm install

# 运行。会打开本地的8080端口，访问http://localhost:8080即可查看。
npm run dev

# 生成打包代码
npm run build