基于vue.js 2.0的百度天气应用

vue-weather

基于vue.js 2.0的百度天气应用。

说明

初学vue,在看完一个简单的视频教程和走两遍完官方文档之后仍然感觉云里雾里,知其然不知其所以然(虽然现在好了点)。请教了高手之后人家都说学习新东西的最好方法不就是学到了之后就要用么。边学边用,根据项目需要学才是最快上手的,但有没有什么适合新手的项目参考,想了几天打算用vue来仿一个简单的天气应用,于是就出现了这个小应用,巩固所学。项目适合刚学完vue想实践的新手,高手略过吧!

技术栈

  • vue2.0
  • vue-router
  • webpack
  • ES6/7
  • Axios
  • less
  • linq.js
  • svg

运行环境

nodejs 6.0 稳定版 npm 3.10

安装

git clone https://github.com/alanWongsGithub/vue-weather.git

cd weather/

npm install

运行

npm run dev

上线

npm run build

然后

本项目用于刚上手vue 2.0文档想找项目尝尝鲜的coder。

由于本人也刚接触vue所以在您看来可能代码写的有些乱,将就着看吧。

项目使用百度IP定位API获取当前城市,再根据当前城市获取中国天气网天气API信息,百度的IP定位API需要自己注册开发者账号然后申请一个AK密钥,然后才能获取定位信息,当然也可以手动设置当前城市天气。

由于使用的免费天气API数据过于简单,导致某些功能只能自己实现或者未开发,比如日落日出时间,当然也可以计算自己实现,稍复杂。

国际惯例,您觉得还可以就 star一下吧,让我更有动力学习。

开发环境为 windows 7 Chrome 57 node 6.10.1。

实现功能

效果截屏

主界面

界面功能

城市列表

城市列表选择设置

八种纯CSS天气图标

(转)一个基于vue2的天气js应用的更多相关文章

  1. 基于Vue2和Node.js的反欺诈系统设计与实现

    最近包工头喊农民工小郑搬砖,小郑搬完砖后沉思片刻,决定写篇小作文分享下,作为一个初学者的全栈项目,去学习它的搭建,到落地,再到部署维护,是非常好的. ​ ------题记 写在前面 通过本文的学习,你 ...

  2. 推荐一个基于Vue2.0的的一款移动端开发的UI框架,特别好用。。。

    一丶YDUI 一只注重审美,且性能高效的移动端&微信UI. 下面为地址自己研究去吧! 我的项目正在用,以前用的Mint-ui但是现在感觉还是这个好一点,官方给出的解释很清楚,很实用. 官方地址 ...

  3. JS实现一个基于对象的链表

    JS实现一个基于对象的链表 /*JS实现一个基于对象的链表*/ function Node(element){ this.element = element;//节点存储的元素 this.next = ...

  4. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  5. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  6. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  7. [vue插件]基于vue2.x的电商图片放大镜插件

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...

  8. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  9. 基于Vue2.x的前端架构,我们是这么做的

    通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...

随机推荐

  1. AC日记——[Sdoi2010]粟粟的书架 bzoj 1926

    1926 思路: 主席树+二分水题: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 #defi ...

  2. javascript大神修炼记(4)——循环

    读者朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中 ...

  3. bootstrap中如何多次使用一个摸态框

    /**弹出框设置**/ function showjcziimodal(url, width) { $("#jczii-modal").remove();//如果存在此Id的Mod ...

  4. CentOS7.5***

    一.借助谷歌上网助手 二.用ss来实现*** 下载工具 sudo yum install shadowsocks-libev 修改配置文件 sudo chmod 777 /etc/shadowsock ...

  5. LoadRunner中的C Vuser函数

    LoadRunner中的C Vuser函数     事务函数: lr_end_sub_transaction 标记子事务的结束以便进行性能分析. lr_end_transaction 标记事务的结束. ...

  6. avaScript技术面试时要小心的三个问题

    JavaScript是所有现代浏览器的官方语言.同样的,JavaScript面试题出现在各种各样的面试中. 这篇文章不是讲述JavaScript最新的库.日常的开发实践,或是ES6的新功能.当然了,上 ...

  7. SystemProperties cannot be resolved错误

    单独用eclipse打开一个工程,出现SystemProperties.get()会出现SystemProperties cannot be resolved.错误 1. 引用SystemProper ...

  8. hibernate自连接--典型的oracle自带emp实现

    用S2SH三大框架整合,用了oracle自带的表emp,实现了自连接. pojo类: public class Emp implements java.io.Serializable { // Fie ...

  9. 洛谷——P1190 接水问题

    P1190 接水问题 题目描述 学校里有一个水房,水房里一共装有 m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为 1. 现在有 n 名同学准备接水,他们的初始接水顺序已经确定.将这些同学 ...

  10. 文本转化工具dos2unix

    文本转化工具dos2unix   由于历史原因,各个平台使用的文本编码规范不同,导致了同一文本在不同平台中显示不同.例如,Windows和Linux的换行符号不同,会造成多行文本显示混乱.为了解决这个 ...