Node.js 環境準備

為了方便切換 Node.js 版本, 在 Ubuntu 下使用 nvm 做 Node.js 的版本管理, 在 Windows 10 下使用 fnm 做 Node.js 的版本管理

Ubuntu 22.04 Node.js 環境準備

以下操作使用 Ubuntu 22.04 環境

訪問 Node.js 下載說明頁 https://nodejs.org/en/download

安裝 nvm

nvm 的作用類似于 conda, 可以在用戶目錄下切換不同版本的Node.js, 安裝參考 https://github.com/nvm-sh/nvm 執行以下命令安裝 nvm, 升級也是這個命令

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
# or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

安裝腳本會將nvm倉庫clone到 ~/.nvm, 并在環境腳本 (~/.bashrc, ~/.bash_profile, ~/.zshrc 或 ~/.profile) 中增加配置語句.

安裝結束后把命令行窗口關掉重新打開, 就能用 nvm 命令了

nvm 安裝管理 nodejs 環境

使用nvm安裝各個版本的nodejs環境

# 安裝最新版
nvm install node
# install latest version in V22
nvm install 22

環境切換

# 查看可用的環境, 紅色字為可安裝但是未安裝的環境
nvm list
# 查看當前環境
nvm current
# 切換到其它環境, 切換到最新版
nvm use node
nvm use stable
# 切換到lts其它版本
nvm use lts/jod
nvm use lts/iron

查看當前環境的node和npm版本

node -v
npm -v

Win10 環境準備

以下操作使用 Windows 10 操作系統, 在 PowerShell 命令行窗口操作

使用微軟商店安裝 fnm

使用系統商店安裝 fnm

winget install Schniz.fnm

手動安裝 fnm

如果商店無法安裝, 可以在 fnm Releases 界面下載 fnm 可執行文件手動安裝

將 fnm.exe 解壓縮到 C:\Users[你的用戶名]\AppData\Roaming\fnm 目錄下, 這是默認的 fnm 目錄

將其添加到 User PATH, 我的電腦空白處右鍵 -> 屬性 -> 高級系統設置 -> 環境變量 -> 用戶環境變量找到 Path -> 編輯 -> 添加一行 C:\Users\[你的用戶名]\AppData\Roaming\fnm 把 [你的用戶名]改成你的用戶名

修改 PowerShell profile, 使其每次啟動時, 自動加載 fnm 環境變量, 在PowerShell中執行

if (-not (Test-Path $profile)) { New-Item $profile -Force }

這時候會創建profile文件, 執行

Invoke-Item $profile

在打開的編輯器中添加內容

fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression

之后再重新打開 PowerShell

執行以下命令安裝不同版本NodeJS

# 查看所有可用版本
fnm list-remote
# 查看已安裝的版本
fnm list
# 安裝 NodeJs V22
fnm install 22
# 安裝 NodeJs V23
fnm install 23
# 查看當前版本
fnm current
# 切換版本
fnm use 22

查看 NodeJS 和 npm 版本

node -v
npm -v

其它的常用命令

# 查看版本
fnm --version
# 查看環境變量
fnm env

注意事項

使用 nvm 和 fnm 管理 Node.js 版本后, 就不要在環境里更新 Node.js 和 npm 的版本

使用 npm 和 vite 創建項目

npm create vite antd-demo

提示選擇

• Select a framework: React
• Select a variant: TypeScript

此時的 antd-demo 目錄結構如下

├── eslint.config.js
├── index.html
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

安裝依賴包, 這一步會增加很多文件, 依賴包會被放到 node_modules 子目錄

npm install

運行項目, 根據提示訪問 http://localhost:5173/ 就能看到界面效果了

npm run dev

添加 antd

在項目目錄下執行以下命令導入 antd 和 @ant-design 等依賴包

npm install antd --save

編輯項目文件 src/App.tsx 修改內容為

import React from 'react';
import { Button } from 'antd';

const App: React.FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

如果上面的 npm 還在運行, 會自動刷新頁面, 此時就能看到頁面變成空白, 左側貼邊出現一個按鈕

再添加一個日期控件

import React from 'react';
import { Button } from 'antd';
import { DatePicker } from 'antd';

const App: React.FC = () => (
  <div className="App">
  	<div>
	    <Button type="primary">Button</Button>
    </div>
    <div>
    	<DatePicker />
	</div>
  </div>
);

export default App;