zoukankan      html  css  js  c++  java
  • (转)一个基于vue2的天气js应用

    基于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天气图标

  • 相关阅读:
    【Java每日一题】20161202
    【Java每日一题】20161201
    【Java每日一题】20161130
    LeetCode刷题:Reverse Words in a String(翻转字符串中的单词)
    **公司实习生笔试总结
    C++ primer学习笔记_6_函数---函数定义、参数传递
    求职面试--复习笔记3
    求职面试--复习笔记2
    一道经典面试题,atoi函数的实现
    求职面试-算法复习系列
  • 原文地址:https://www.cnblogs.com/guazi/p/7009596.html
Copyright © 2011-2022 走看看