基于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. Linux的文件帮助和运行级别

    man命令相关:man -1 +参数 表示查询第几章的帮助说明man -k +参数 表示以该参数为关键字查询所有相关命令或文件命令 --help 简单查询命令使用说明具体的帮助文档存储在/usr/sh ...

  2. sizeof(类)

    类的大小是什么?确切的说,类只是一个类型定义,它是没有大小可言的. 用sizeof运算符对一个类型名操作,得到的是具有该类型实体的大小.首先:我们要知道什么是类的实例化,所谓类的实例化就是在内存中分配 ...

  3. python多线程编程(6): 队列同步

    原文请看:http://www.cnblogs.com/holbrook/archive/2012/03/15/2398060.html 前面介绍了互斥锁和条件变量解决线程间的同步问题,并使用条件变量 ...

  4. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  5. 戴尔笔记本Inspiron 7560(灵越) 加装固态硬盘从选购固态硬盘到系统迁移到设置SSD为第一启动(受不了了,网上的教程就没有完整的)

    菜鸡我的笔记本为戴尔灵越Inpsiron 7560,其实Inspiron 15 7560 和Inspiron 7560是同一个型号. 电脑拆了安过内存条,换过电池,现在又加了一块固态硬盘. 因为不想安 ...

  6. 转:x64与x86的改变

    http://tieba.baidu.com/p/1250470248 x64与x86的改变 硬件要求就是64位的CPU.操作系统也必须是64位的,如果在64位的CPU上安装了32位的操作系统,就算编 ...

  7. 在Spring Controller中将数据缓存到session

    Servlet方案 在Controller的方法的参数列表中,添加一个javax.servlet.http.HttpSession类型的形参.spring mvc会 自动把当前session对象注入这 ...

  8. 最大子数组(LintCode)

    最大子数组 给定一个整数数组,找到一个具有最大和的子数组,返回其最大和. 样例 给出数组[−2,2,−3,4,−1,2,1,−5,3],符合要求的子数组为[4,−1,2,1],其最大和为6 注意 子数 ...

  9. 【BZOJ 1050】1050: [HAOI2006]旅行comf (动态SPFA)

    1050: [HAOI2006]旅行comf Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权值Vi(Vi<30000). ...

  10. JZYZOJ1457 [NOIP2016]换教室 期望dp 动态规划 floyd算法 最短路

    http://172.20.6.3/Problem_Show.asp?id=1457 我不知道为什么我倒着推期望只有80分,所以我妥协了,我对着题解写了个正的,我有罪. #include<cst ...