用vue写一个天气webAPP

博客地址
项目的仓库weather-forecast-vue。
项目demo
目前完成了以下功能

• 当前定位城市天气信息查看
• 下拉刷新天气信息
• 上拉加载古诗信息
• 查看24小时逐小时天气信息
• 查看未来6天天气信息
• 日落日出时间展示
• 生活信息简略详细展示
• 城市管理
• 天气分享
• 语音播报

先让我们来看看最终的效果是什么样的~

话不多说，动手实现吧~

Step1 安装vue-cli

此处默认你的电脑当中已经安装 node.js 和 npm

1. 全局安装webpack

npm install webpack -g

2. 全局安装vue-cli

npm install --global vue-cli

Step2 构建项目并安装插件

构建 vue 项目

vue init webpack vueWeather //vueWeather为此项目的名称你也可以使用其他的
cd ./vueWeather //进入到项目目录
npm install
npm run dev //以dev方式执行项目

此时你就可以在浏览器当中看到你正在运行的项目

当第一个命令执行后，会有几个选项让你选:

• Project name项目名称
• Project description (A Vue.js project)项目描述，也可直接点击回车，使用默认名字
• Author ()作者
• Runtime + Compiler: recommended for most users运行加编译，回车选择yesRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere仅运行时，已经有推荐了就选择第一个了
• Install vue-router? (Y/n)是否安装vue-router，项目中我们会使用vue-router来做路由，所以选择yes
• Use ESLint to lint your code? (Y/n)是否使用ESLint管理代码，根据自己的情况做出选择
• Setup unit tests with Karma + Mocha? (Y/n)是否安装单元测试，笔者本次没有安装
• Setup e2e tests with Nightwatch(Y/n)?是否安装e2e测试，笔者本次没有安装

插件安装

vue拥有丰富的轮子，所以我们可以直接使用已经写好的轮子，从而提高开发效率。

1. 安装axios
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，尤雨溪宣布停止更新 vue-resource，并推荐大家使用axios之后，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。

npm install axios --save

大部分的插件可以在 main.js 文件中引入后进行 Vue.use()，但是 axios 不能 use。只能每个需要发送请求的组件中即时引入。为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton。这里只说修改原型链的方式
在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中，是无法使用 axios 命令的。所以我们将 axios 改写为 Vue 的原型属性

Vue.prototype.$http= axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http命令
2. 安装muse-ui
由于要实现手机端的webapp，于是在比较流行的框架中选择了muse-ui进行开发，具体使用方式如下，你也可以查看官方文档，进行跟深一步的学习。

npm i muse-ui --save

安装完成后，在main.js文件中进行引用

import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';

Vue.use(MuseUI);

除此之外，还用到了 muse-ui 中提供的 muse-ui-loading 和 muse-ui-progress
muse-ui-loading用于实现加载动画

npm install muse-ui-loading --save

import 'muse-ui-loading/dist/muse-ui-loading.css'; // load css
import Loading from 'muse-ui-loading';
Vue.use(Loading);

插件muse-ui-progress用于实现页面加载的进度条

npm install muse-ui-progress --save

//index.js 文件
import 'muse-ui-progress/dist/muse-ui-progress.css';
import NProgress from 'muse-ui-progress';
Vue.use(NProgress);

在 index.html 引入 muse-ui 推荐的Material Design Icons字体图标库

<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">

3. 安装vue-xc-city
   使用vue-xc-city这个插件用于城市搜索

npm install vue-xc-city --save

安装完成后，在main.js文件中进行引用