# Nodejs

使用ServBay管理多個版本的Nodejs非常簡單。我們將通過安裝Nodejs 22來說明這一點。

# 安裝 Nodejs 22

在左側邊欄中點選服務,您可以看到ServBay提供的多個Nodejs版本。

安裝 Nodejs 22

找到Nodejs 22所在的行,點擊右側的綠色下載按鈕,Nodejs 22將在僅僅幾秒鐘內下載並安裝。

# 安裝 yarn 和 pnpm

在安裝了Nodejs 22之後,讓我們檢查一下:

Nodejs 22 版本

從終端輸出中,我們可以看到已經安裝了Nodejs 22。

然後讓我們通過corepack安裝yarn和pnpm:

$ corepack enable yarn
$ yarn -v
1.22.22
$ corepack enable pnpm
$ pnpm -v
9.1.0
1
2
3
4
5
6

我們可以看到yarn和pnpm已經被安裝了。

# Vue 3 範例

在安裝了Nodejs和yarn/pnpm後,您可以開始進行前端開發。接下來,我們將使用Vue 3作為示例。

# Vue 3 腳手架

首先,讓我們運行 Vue 3 腳手架以生成一個 Vue 3 項目。

Vue 3 腳手架

# 透過yarn安裝依賴

然後進入項目目錄:

$ cd hello
1

執行 yarn 以安裝依賴包:

Yarn安裝依賴

# 啟動開發伺服器

然後執行 yarn dev 以啟動本地開發服務器:

$ yarn dev
1

在伺服器成功啟動後,將顯示以下信息:

Yarn Dev 資訊

此時,請在瀏覽器中訪問 http://localhost:5173 ,您將看到由 Vue 3 生成的默認首頁:

Vue 3 預設首頁

# 編輯源代碼

讓我們嘗試將 "You did it!" 改為 "Hello, World!",看看會發生什麼:

Vue 3 Hello World 源碼

修改代碼後,Vue 3 將自動刷新頁面,因此我們可以看到修改後的網站首頁:

Vue 3 Hello World 頁面

現在你已經準備好使用nodejs進行前端開發了。

Last Updated: 5/12/2024