vue时间天气插件_vue创建天气webapp

vue创建天气webapp

[x] 当前定位城市天气信息查看

[x] 下拉刷新天气信息

[x] 上拉加载古诗信息

[x] 查看24小时逐小时天气信息

[x] 查看未来6天天气信息

[x] 日落日出时间展示

[x] 生活信息简略详细展示

[x] 城市管理

[x] 天气分享

[x] 语音播报

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

话不多说，动手实现吧~

Step1 安装vue-cli

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

全局安装webpack

npm install webpack -g

全局安装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拥有丰富的轮子，所以我们可以直接使用已经写好的轮子，从而提高开发效率。

安装axios

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

npm install axio