開始建構環境

更新 發佈閱讀 4 分鐘

首先我們需要先建構環境,那我們要先去安裝nvm。

至於nvm是什麼,nvm全名"Node Version Manager",是一款專門用來管理node.js版本的工具,他可以協助你安裝、切換、管理不同版本的Node.js


安裝nvm:

接著開啟終端機,按照下列步驟做:

(也可直接搜尋power shell,很重要因為接下來他會伴隨著我們每一個路程)

// 用來確認nvm是否確實安裝
nvm version

//查看nvm上有那些版本的Node.js可以進行安裝
nvm list available

//安裝你想要的Node.js的版本,例如:目前我安裝的22.21.1
nvm install 22.21.1

//如果有其他版本的Node.js,享用其他版本的,可以輸入
nvm use 22.21.1

//用來查看Node.js是否正確被安裝
node -v


然後安裝Git

我一樣開啟終端機進行以下步驟:

//​下載完之後可以用這個只來確認是否安裝成功。
git --version

//​接著需要用指令設定使用者名稱與電子郵件:
git config --global user.name "XXXX"
git config --global user.email XXXXX@example.com
git config --list # 確認設定資訊

(名稱跟電子郵件可以自己設定)

接著要開啟VScode裡面的TERMINAL 輸入以下程式:

git init​  //建立本地儲存庫

之後等待檔案更新,就把檔案丟進暫存區。

git add .  //"."代表把所有檔案

再來再把檔案提交到本地儲存庫裡面:

git commit -m "Your commit message"  //""裡面可以輸入你要稱呼的名稱

之後儲存庫建好了之後,就可以輸入以下指令:

git remote add origin https://github.com/{user-name}/{repo-name}.git

git branch -M main

git push -u origin main

只要輸入好以上指令後,之後有程式碼有變動,要退到遠端儲存庫之後,只需要輸入git push即可。

安裝VScode【Visual Studio Code】

接著我們可以在VScode上安裝一些插件協助處理作業:

//​把 VScode 變中文。
Chinese (Traditional) Language Pack for Visual Studio Code

//​一鍵執行程式碼。
Code Runner

//​自動完成 npm 套件引入。
npm Intellisense

//檢查拼字錯誤。
​Code Spell Checker

//實時預覽功能。
​Live Preview

//捕捉並顯示程式碼中的空格。
​Trailing Spaces

//​讓註解變得鮮明易於辨識。
TODO Highlight

//為專案中的檔案加上鮮明的圖示。
​Material Icon Theme

//​可以在 VScode 中看到 git flow。
Git Graph

//​可以快速幫助修改 HTML tag。
Auto Rename Tag

//​在寫 CSS 的色碼時可以直接看到顏色。
Color Highlight


安裝Visual Studio Community 2022

(其他版本也是可以,但是Community是免費版,其他要付費)

完成以上操作就算基本完成環境設置。


留言
avatar-img
睿哲楊的沙龍
2會員
18內容數
你可能也想看
Thumbnail
很多人以為我天天窩咖啡店,是什麼深度咖啡愛好者。 其實我對咖啡的了解,大概只比我對微積分多一點點。 我真正上癮的,是那張靠窗的位子,還有整間店的生活背景音。 我不是來提神的,我是來蒐集別人的人生片段。☕️👀 坐在那邊,不需要社交,不需要說話, 只需要一杯飲料+一
Thumbnail
很多人以為我天天窩咖啡店,是什麼深度咖啡愛好者。 其實我對咖啡的了解,大概只比我對微積分多一點點。 我真正上癮的,是那張靠窗的位子,還有整間店的生活背景音。 我不是來提神的,我是來蒐集別人的人生片段。☕️👀 坐在那邊,不需要社交,不需要說話, 只需要一杯飲料+一
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
近期參與公司的專案開發,開始使用VB.Net來做介面設計與資料分析 身為有一點點強迫症的我,對於UI上GroupBox內的所放入的TextBox也好、DataGridview也好,總會希望與其他的控制元件可以整整齊齊對在同一條線上。 雖然有好用的拖拉控制元件,但常常盯著我的眼睛實在快要爆炸了。
Thumbnail
近期參與公司的專案開發,開始使用VB.Net來做介面設計與資料分析 身為有一點點強迫症的我,對於UI上GroupBox內的所放入的TextBox也好、DataGridview也好,總會希望與其他的控制元件可以整整齊齊對在同一條線上。 雖然有好用的拖拉控制元件,但常常盯著我的眼睛實在快要爆炸了。
Thumbnail
本文探討一位年輕女性因債務問題遭法院強制執行薪資,在面對法律與制度的冷漠時,她選擇透過寫作記錄自身經歷,並呼籲社會重視弱勢群體的聲音。
Thumbnail
本文探討一位年輕女性因債務問題遭法院強制執行薪資,在面對法律與制度的冷漠時,她選擇透過寫作記錄自身經歷,並呼籲社會重視弱勢群體的聲音。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
表達對已逝父親深沉的愛與感謝,以及未能及時表達的遺憾。
Thumbnail
表達對已逝父親深沉的愛與感謝,以及未能及時表達的遺憾。
Thumbnail
許多人總是為他人著想,習慣隱藏疲憊與情緒,以致身心俱疲。本文探討這些「為他人撐傘」的人,如何在兼顧善良的同時,學會善待自己,並提出五點建議:允許自己說「不」、別讓付出被視為理所當然、表達內心感受、照顧內在需求、擁抱不完美的自己。
Thumbnail
許多人總是為他人著想,習慣隱藏疲憊與情緒,以致身心俱疲。本文探討這些「為他人撐傘」的人,如何在兼顧善良的同時,學會善待自己,並提出五點建議:允許自己說「不」、別讓付出被視為理所當然、表達內心感受、照顧內在需求、擁抱不完美的自己。
Thumbnail
許多人習慣壓抑自我情緒,討好他人,害怕衝突與不被接納。心理學指出,真正的自由來自於誠實表達自我,而壓抑情緒會導致內心疲憊與空虛。文章提醒讀者允許自己說「不」、珍視自己的付出,並接納自身情緒,學習愛自己,建立健康的人際關係。
Thumbnail
許多人習慣壓抑自我情緒,討好他人,害怕衝突與不被接納。心理學指出,真正的自由來自於誠實表達自我,而壓抑情緒會導致內心疲憊與空虛。文章提醒讀者允許自己說「不」、珍視自己的付出,並接納自身情緒,學習愛自己,建立健康的人際關係。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
記帳,是認識自己、瞭解金錢流向、創造理想生活的方式。 本文分享記帳的重要性、簡單易行的記帳方法,以及幾款好用的記帳App推薦(記帳城市、天天記帳、簡單記帳、Money+記帳、存錢記帳), 鼓勵讀者從小處著手,養成記帳習慣,溫柔地陪伴自己走向理想生活。
Thumbnail
記帳,是認識自己、瞭解金錢流向、創造理想生活的方式。 本文分享記帳的重要性、簡單易行的記帳方法,以及幾款好用的記帳App推薦(記帳城市、天天記帳、簡單記帳、Money+記帳、存錢記帳), 鼓勵讀者從小處著手,養成記帳習慣,溫柔地陪伴自己走向理想生活。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
近期試用閃念貝殼APP,這款AI語音轉錄工具功能強大,提供語音轉錄、文本潤飾及主題生成等功能。其轉錄表現出色,且界面簡潔易用,節省用戶操作時間。然而,訂閱模式需用戶根據使用需求謹慎選擇。本文總結了使用體驗及與其他應用的對比,讓你瞭解閃念貝殼是否適合你。
Thumbnail
近期試用閃念貝殼APP,這款AI語音轉錄工具功能強大,提供語音轉錄、文本潤飾及主題生成等功能。其轉錄表現出色,且界面簡潔易用,節省用戶操作時間。然而,訂閱模式需用戶根據使用需求謹慎選擇。本文總結了使用體驗及與其他應用的對比,讓你瞭解閃念貝殼是否適合你。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News