基于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. 数据库的主从复制常用Xshell命令

    mysql配置 1.设置数据库用户名和密码 mysqladmin -u root password "root" 2.打开3306端口号 iptables -I INPUT -p ...

  2. Nodejs创建简单的Bot

    官方文档地址:https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-quickstart 前提: 1.你已经 ...

  3. ZOJ 3279-Ants(线段树)

    传送门:zoj 3279 Ants Ants Time Limit: 2 Seconds      Memory Limit: 32768 KB echo is a curious and cleve ...

  4. 在class中获取web资源

    背景介绍 项目中用jasperreport做报表,模板文件为web资源,不在classpath之中.class又需要获取模板文件,结合数据源,生成pdf格式的报表. 之前的做法是定义一个public ...

  5. Bzoj2818 Gcd(莫比乌斯反演)

    题面 题意都在题目里面了 题解 你可以把题意看成这个东西 $$ \sum_{i=1}^n\sum_{j=1}^m\mathbf f(gcd(i,j)) $$ 其中$\mathbf f(n)$为$是否是 ...

  6. linux的bash和shell关系

    shell通俗理解:把用户输入的命令翻译给操作系统. shell 是一个交互性命令解释器.shell独立于操作系统,这种设计让用户可以灵活选择适合自己的shell.shell让你在命令行键入命令,经过 ...

  7. 【欧拉回路】【Fleury算法】CDOJ1642 老当益壮, 宁移白首之心?

    题意: 构造一个01串,使得满足以下条件: 1. 环状(即首尾相连) 2. 每一位取值为0或1 3. 长度是2^n 4. 对于每个(2^n个)位置,从其开始沿逆时针方向的连续的n位01串(包括自己) ...

  8. mybatis批量插入:oracle和mysql的区别

    一.oracle批量插入 <insert id="save" parameterType="java.util.List"> insert into ...

  9. js模板引擎-art-template常用

    art-template javascript 模板引擎 分为原生语法和简洁语法,本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一.引 ...

  10. 那些年我们踩过的坑-NSTimer

    昨天下午工作的时候遇见一个这样的需求,网络请求失败后把请求数据保存到本地,并自动重发3次,时间间隔是10秒,如果3次后还失败的话,下一次启动这个接口的时候,把新数据和保存在本地的数据都要发送,刚开始以 ...