iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

Nuxt3的初心者之旅:淬鍊出屬於自己的金融投資儀表板 系列

在工作上使用Vue半年多了,一直苦無機會用到Nuxt跟圖表類的套件.恰巧之前曾在金融機構服務過,那不如就結合之前的職涯經驗,試著做出個投資人走過路過會想看看的儀表板吧!!

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

DAY1 - 前言

起因 轉職為前端工程師也快一年了,一直都是使用Vue在做前端的開發。雖然實務中也是遇到各種隕石奇形怪狀的問題,仍覺得自己在前端的成長速度或者技術掌握的不夠,因此...

2023-09-16 ‧ 由 JCY 分享
DAY 2

DAY2 - 萬事起頭易 - 建立Nuxt基本環境

安裝Nuxt 開啟專案 App.vue 由於一開始預設只會有nodemodules,.nuxt,public,server四個資料夾所以要再新增會用到的部分 簡...

2023-09-17 ‧ 由 JCY 分享
DAY 3

DAY3 - 丞相起風了 - 在Nuxt3安裝&簡單介紹Tailwind重要功能

接下來安裝加速切版的Tailwind: 1.先在vscode開啟cmd並打上: npm install -D tailwindcss postcss autop...

2023-09-18 ‧ 由 JCY 分享
DAY 4

DAY4 - 股市圖表不求人 - 在Nuxt3安裝HighChart&簡單範例

股市圖表的部分包含每日價格走勢,k線圖等其實HighChart都做的蠻詳細的所以決定用它來呈現最重要的圖表 首先在官方網站https://www.highcha...

2023-09-19 ‧ 由 JCY 分享
DAY 5

DAY5 - 爬蟲Out - 尋找適合純前端的美股API

主要的套件都安裝的差不多了再來要處理美股的資料來源 國外其實蠻多美股的財經網站有分享API供開發使用但較多都是給後端去串只會前端的開發者只能望洋興嘆啊! 幸好爬...

2023-09-20 ‧ 由 JCY 分享
DAY 6

DAY6 - AI魔術師 - 用AI生出好看的UI設計稿

雖然是SideProject有設計稿的話在切版速度跟整齊性也能提升不少 但設計其實會花上不少時間並且也不是每個工程師都會設計UI稿(不要拖人下水)所以這次就透過...

2023-09-21 ‧ 由 JCY 分享
DAY 7

DAY7 - 把股價變成你要的形狀 - Nuxt3的HighChart股價走勢圖

終於開始要進入正題了先來做一個基本的股價走勢圖吧! 程式碼 <template> <ClientOnly> <high...

2023-09-22 ‧ 由 JCY 分享
DAY 8

DAY8 - 把股價變成你要的形狀 - Nuxt3的HighChart股價走勢圖(2)

今日工事 延續昨天的走勢圖今天主要任務是把圖表的細節完善更換股票以及根據股價漲跌顯示綠色(漲)或紅色(跌)(美國漲跌幅顏色跟國內相反) 程式碼 <temp...

2023-09-23 ‧ 由 JCY 分享
DAY 9

DAY9 - 一頁定江山 - 用Nuxt3完成SPA(單頁式應用)&即時金融新聞

今日工事 刻出初版的headerSPA以及顯示最新的金融市場新聞在首頁下方 SPA // header.vue <template> <d...

2023-09-24 ‧ 由 JCY 分享
DAY 10

DAY10 - 名次就是HighLight - 做出即時的當日漲跌幅及活躍股票排名

今日工事 用Promise.all完成即時的當日漲跌幅及活躍股票排名看板 看板 <template> <NuxtLayout name=&...

2023-09-25 ‧ 由 JCY 分享