(轉)一個基於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天氣圖標


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM