vue環境變數使用!打造一個簡單的weather app吧!(30 Days challenge-13)

前言

剛接觸到node的時候我就有自己寫過一個weather app，不過挺不美觀的，今天就試試看用vue重新做一次，快速打造非常簡單的內容!再次體會到框架的方便:P

使用技術

• vue.js
• vue-cli 3
• openWeather API

專案介紹

一個簡單的天氣app，預設的顯示城市為我住的台中，使用者則可以自由地輸入想查詢的地點，若查詢的地點溫度高於16度，背景則會出現相應的變化。

由於專案內容有用到環境變數，以往我的作法可能會是安裝dotenv或是config套件來做敏感資訊的隱藏，不過如果你跟我一樣習慣用vue-cli打造專案，那你便不需要以上的套件，只要記得在根目錄下設置.env檔案，並確定變數名稱有加上VUE_APP_這樣的前餟即可，如以下範例，接著就一樣可以用process.env.變數名稱來存取了，詳細內容可以參照官方文件。

//.env
VUE_APP_API_KEY=PUT YOUR API KEY here

專案預覽

專案連結

github
demo