2020it邦鐵人賽 | Vue 教學 2020
tags:Vue.jsItIron2020前言終於進到最終的三天了,坦白說做為一個教學的系列文,我是很想多示範幾個微型專案做為教學,但我自己在篇幅的分配沒有做得很好,明年參加時我會再特別注意的!我們將利用剩下的三天打造一個簡單的COVID-19trackingdashboard。2020對於許多人來說都不是個好年,新冠肺炎打亂了很多計畫,至今半年過去也不見好轉的跡象,了解它的趨勢我想是很重要的一環,那就自己做一個吧!專案預覽這個非常簡單的小專案,用我們之前教過的東西就可以打造的小玩意!做出來的成品會如同以下的demo圖片,會持續追蹤最近一個月內美...
tags: Vue.js ItIron2020 前言終於進到最終的三天了,坦白說做為一個教學的系列文,我是很想多示範幾個微型專案做為教學,但我自己在篇幅的分配沒有做得很好,明年參加時我會再特別注意的! 我們將利用剩下的三天打造一個簡單的COVID-19 tracking dashboard。2020對於許多人來說都不是個好年,新冠肺炎打亂了很多計畫,至今半年過去也不見好轉的跡象,了解它的趨勢我想是很重要的一環,那就自己做一個吧!
專案預覽這個非常簡單的小專案,用我們之前教過的東西就可以打造的小玩意! 做出來的成品會如同以下的demo圖片,會持續追蹤最近一個月內美國境內的確診、康復、使用呼吸器&死亡的人數。你也可以在這個連結[1]玩玩看?
在畫面的部分我用了一些套件讓成品稍微不要這麼單調,其他的部分只要你之前的內容都有聽懂,我想也不是什麼大問題的:D
專案建置首先一樣請你透過vue-cli打造一個專案,preset我們這次仍選擇default即可
vue create vue create vue-covid19-tracking-demo安裝完成後,一樣進入專案資料夾,但先不要急著啟動伺服器,我們還有些東西要安裝
cd vue-covid19-tracking-demo 加入vuetify前端框架接著我們要做一件新的事情~為了讓之後可以專心在邏輯處理上,畫面的部分這次我們要透過vuetify這個CSS框架來做一點協助,就像bootstrap、elementUI或是Bulma等框架一樣,沒什麼特別的! 請你透過以下的指令安裝vuetify框架
vue add vuetify安裝完成後你應該會順利看到終端機出現新的提示
我們不太需要額外的設定,這次也選擇Default即可它會需要一點時間安裝,當結束後請你輸入熟悉的啟動指令
npm run serve你會發現你在localhost:8080看到的畫面已經不太一樣了
透過npm/yarn安裝套件接下來的流程就簡...