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, 升级也是这个命令
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 -vWin10 环境准备
以下操作使用 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 = () => (
<Button type="primary">Button</Button>
);
export default App;如果上面的 npm 还在运行, 会自动刷新页面, 此时就能看到页面变成空白, 左侧贴边出现一个按钮
再添加一个日期控件
import React from 'react';
import { Button } from 'antd';
import { DatePicker } from 'antd';
const App: React.FC = () => (
<Button type="primary">Button</Button>
<DatePicker />
);
export default App;
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]