Node.js环境和antd初始化项目

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, 升级也是这个命令

bash 复制代码

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环境

bash 复制代码

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

环境切换

bash 复制代码

# 查看可用的环境, 红色字为可安装但是未安装的环境
nvm list
# 查看当前环境
nvm current
# 切换到其它环境, 切换到最新版
nvm use node
nvm use stable
# 切换到lts其它版本
nvm use lts/jod
nvm use lts/iron

查看当前环境的node和npm版本

bash 复制代码

node -v
npm -v

Win10 环境准备

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

使用微软商店安装 fnm

使用系统商店安装 fnm

bash 复制代码

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文件, 执行

bash 复制代码

Invoke-Item $profile

在打开的编辑器中添加内容

复制代码

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

之后再重新打开 PowerShell

执行以下命令安装不同版本NodeJS

bash 复制代码

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

查看 NodeJS 和 npm 版本

bash 复制代码

node -v
npm -v

其它的常用命令

bash 复制代码

# 查看版本
fnm --version
# 查看环境变量
fnm env

注意事项

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

使用 npm 和 vite 创建项目

bash 复制代码

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 子目录

bash 复制代码

npm install

运行项目, 根据提示访问 http://localhost:5173/ 就能看到界面效果了

bash 复制代码

npm run dev

添加 antd

在项目目录下执行以下命令导入 antd 和 @ant-design 等依赖包

bash 复制代码

npm install antd --save

编辑项目文件 src/App.tsx 修改内容为

typescript 复制代码

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 还在运行, 会自动刷新页面, 此时就能看到页面变成空白, 左侧贴边出现一个按钮

再添加一个日期控件

typescript 复制代码

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;