在工作上使用Vue半年多了,一直苦無機會用到Nuxt跟圖表類的套件.恰巧之前曾在金融機構服務過,那不如就結合之前的職涯經驗,試著做出個投資人走過路過會想看看的儀表板吧!!
起因 轉職為前端工程師也快一年了,一直都是使用Vue在做前端的開發。雖然實務中也是遇到各種隕石奇形怪狀的問題,仍覺得自己在前端的成長速度或者技術掌握的不夠,因此...
安裝Nuxt 開啟專案 App.vue 由於一開始預設只會有nodemodules,.nuxt,public,server四個資料夾所以要再新增會用到的部分 簡...
接下來安裝加速切版的Tailwind: 1.先在vscode開啟cmd並打上: npm install -D tailwindcss postcss autop...
股市圖表的部分包含每日價格走勢,k線圖等其實HighChart都做的蠻詳細的所以決定用它來呈現最重要的圖表 首先在官方網站https://www.highcha...
主要的套件都安裝的差不多了再來要處理美股的資料來源 國外其實蠻多美股的財經網站有分享API供開發使用但較多都是給後端去串只會前端的開發者只能望洋興嘆啊! 幸好爬...
雖然是SideProject有設計稿的話在切版速度跟整齊性也能提升不少 但設計其實會花上不少時間並且也不是每個工程師都會設計UI稿(不要拖人下水)所以這次就透過...
終於開始要進入正題了先來做一個基本的股價走勢圖吧! 程式碼 <template> <ClientOnly> <high...
今日工事 延續昨天的走勢圖今天主要任務是把圖表的細節完善更換股票以及根據股價漲跌顯示綠色(漲)或紅色(跌)(美國漲跌幅顏色跟國內相反) 程式碼 <temp...
今日工事 刻出初版的headerSPA以及顯示最新的金融市場新聞在首頁下方 SPA // header.vue <template> <d...
今日工事 用Promise.all完成即時的當日漲跌幅及活躍股票排名看板 看板 <template> <NuxtLayout name=&...