基于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. 错误:Eclipse老是出现 updating error reports database

    Eclipse 火星版(Mars)一直出现 updating error reports database. Window--->Preferences--->General---> ...

  2. vue-music 关于Search(搜索页面)--上拉加载

       建立搜索框组件页面,searchBox,组件接受一个可以自定义传入的placeholder 属性.input v-model 双向绑定数据关联到query 中, 在created中监听 quer ...

  3. 读书笔记(javascript 高级程序设计)

    一. 数据类型: 1. undefined: 未声明和未初始化的变量,typeof 操作符返回的结果都是 undefined:(建议未初始化的变量进行显式赋值,这样当 typeof 返回 undefi ...

  4. 第7天-javascript内置对象

    数组相关方法 concat 用来连接多个数组 <script> var a = [1,2,3]; var b = [3,4,5]; var c = a.concat(b); console ...

  5. 50 years, 50 colors HDU - 1498(最小点覆盖或者说最小顶点匹配)

    On Octorber 21st, HDU 50-year-celebration, 50-color balloons floating around the campus, it's so nic ...

  6. [CODE FESTIVAL 2017]Full Tournament

    题意:$2^n$个编号为$1\cdots2^n$的人打比赛,这个比赛会给每个人一个唯一的排名,比赛规则递归地定义如下: $2^n$个人打的是级别为$n$的比赛,初始时他们按某种顺序站成一排 当$n=0 ...

  7. 用xib自定义UITableViewCell的注意事项——重用

    问题的提出: 有时候我们经常需要自定义tableView的cell,当cell里面的布局较为复杂时往往舍弃纯代码的方式而改用xib的方式进行自定义.当我们用纯代码的方式布局cell时,往往会在cell ...

  8. light oj 1236 - Pairs Forming LCM & uva 12546 - LCM Pair Sum

    第一题给定一个大数,分解质因数,每个质因子的个数为e1,e2,e3,……em, 则结果为((1+2*e1)*(1+2*e2)……(1+2*em)+1)/2. 代码如下: #include <st ...

  9. Java并发(四):happens-before

    happens-before 一个操作执行的结果需要对另一个操作可见,那么这两个操作之间必须存在happens-before关系 happen-before原则是JMM中非常重要的原则,它是判断数据是 ...

  10. JS解决URL传递参数中文乱码问题

    function getUrlParam(name){ // 用该属性获取页面 URL 地址从问号 (?) 开始的 URL(查询部分) var url = window.location.search ...