H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue练习项目:看天气(源码已上传github)

项目介绍

为了把vue的知识串一遍,有了写一个简单的小东西的想法,为什么选择天气呢?当然是接口好找0.0
这里使用的是和风天气的免费接口,感谢。

项目首页是正常的天气查看,有天气、温度、风力、体感温度等的显示,加了个未来三天天气查看的显示。
样式参考了一下小米手机自带的天气查看。
![首页.png](/img/bVbJRMz)
点击左上角的城市位置,进入选择城市界面,可进行关键字查询。
点击相应城市跳转回首页进行该城市的天气渲染。
样式参考了一个 quiteweather的小程序。
![城市选择.png](/img/bVbJRMN)![城市搜索.png](/img/bVbJRMP)
项目目录如图:
![Snipaste_2020-07-16_20-29-26.png](/img/bVbJRMT)
开发时间:约15小时

项目准备

Node、Vscode、和风天气创建应用(最好不要用我的)

使用

github地址: [weather](https://github.com/ylLin611/weather)

1、将代码down下来,用vscode打开
2、crtl+~ 打开控制台执行 npm install
3、npm run serve

分享在这供大家学好vue基础知识后找不到东西练习时使用,项目很粗糙,大家可以自行完善,成为自己的一个小项目。学习前端,一起加油

本文地址:H5W3 » 【前端技术】Vue练习项目:看天气(源码已上传github)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址