vue搭建简单个人天气预报

原创 堕落千风 教程 vue 237阅读 2019-02-27 01:04:56 举报

在gitchat上学习一个基于 Vue 的个人天气预报

简介:

项目主要功能是获取本地的位置信息和实时时间,然后根据城市名获取本地的实时天气信息和未来几天的天气信息。切换城市,可以选择想查看的城市的天气信息。

效果图

定位本地城市:

切换到家乡城市:

开始

对高德地图JS API的学习

官网:https://lbs.amap.com/api/javascript-api/guide/abc/prepare
自行学习中。。。。。。
学习完成———已注册一个账号并申请到 Key

对 ECharts 的学习

官网:http://www.echartsjs.com/index.html
after a time(过了一段时间)
搞定。

对文章内容的学习

1.node 的安装与vue项目文件的搭建因为之前有学过一些基础的知识点,在这里也就不多说了,自行百度查询。

2.修改vue中的固定界面

  • 首先通过 vue init webpack weather 创建项目,并安装依赖 npm install(我是用淘宝镜像:cnpm install ),安装完之后,把项目运行起来npm run dev(我是用淘宝镜像:cnpm run dev ) 。
  • 打开项目,在 components 下新建 index.vue 文件。
  • 然后在路由文件 router/index.js 中注册路由,引入 index.vue import index from '@/components/index'。
  • 把 HelloWorld 替换成 index 如下:

3.安装相关组件

  • 先安装下 vant: npm install vant -S (cnpm install vant -S)在城市切换时需要。
    然后再 main.js 中加入以下代码:

组件便能使用了:

4.实现天气预报的业务逻辑部分
在 index.html 中引入这个高德和 Echarts 的 js。申请 key部分已经在最开始的时候完成了,带入下面对应的key中。

5.学习高德地图定位:https://lbs.amap.com/api/javascript-api/guide/services/geolocation
通过 ip 定位获取当前的位置信息,代码如下:

6.学习高德地图获取天气信息:https://lbs.amap.com/api/javascript-api/guide/services/weather

通过获得到的成名获取天气信息,代码如下:

接下来写初始化 Echarts 的代码,如下:

项目完成。

源代码地址:https://github.com/yoona-lin/weather

对一些专业的知识点以及细节部分,请看教程:https://gitbook.cn/gitchat/activity/5c2c40742061ae3944327eda?utm_source=csdn_blog

总结:

源码加载的时候用 npm install 、 npm run dev 加载费事而且有时无法安装依赖
可采用淘宝的镜像 cnpm 来安装依赖,即 cnpm install 、 cnpm run dev ,可能也需要一会,但相比好多。

本文章是跟着学习与做笔记的,许多都是从原文参考而来的,若有侵权,则联系删除。

评论 ( 1 )
最新评论
卓卓亭亭兮 2019-02-27 21:15:26 1F

mark

本人最近建立了开源项目usuallyjs,非常欢迎楼主一起交流,github地址:https://github.com/JofunLiang/usuallyjs,别忘了start哦