vue + echarts 实时图标_前端：开发一款基于 Vue 的个人天气预报

这是一个简单的天气预报 Demo，有天看手机上的天气，突发奇想，自己能不能也做个来玩玩啦。作为一个技术人员就是要保持一份好奇心。肯定没人家专业的做的好，纯玩。

先来张效果图：

这里简单介绍一下项目的主要功能，先获取本地的位置信息和实时时间，然后根据城市名获取本地的实时天气信息和未来几天的天气信息。切换城市，可以选择想查看的城市的天气信息。

在开始项目之前需要先准备一点资料。

天气预报的信息是来源于高德地图，所以你需要先注册一个账号并申请 Key。

还没用过高德的，这是教程： https://lbs.amap.com/api/javascript-api/guide/abc/prepare

然后还需要对 ECharts 有点一些了解，不懂的可以先去了解了解。 http://www.echartsjs.com/index.html

准备工作完了就可以开始干项目了。

关于 Node 的安装和 Vue 初始化项目的知识这里就不说了，百度一下，资料有很多。

首先通过vue init webpack weather 创建项目，并安装依赖，安装完之后，把项目运行起来。

用你熟悉的代码编辑器打开项目，在 components 下新建 index.vue 文件。

然后在路由