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

1. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
2. # or
3. 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环境

1. # 安装最新版
2. nvm install node
3. # install latest version in V22
4. nvm install 22

复制代码

环境切换

1. # 查看可用的环境, 红色字为可安装但是未安装的环境
2. nvm list
3. # 查看当前环境
4. nvm current
5. # 切换到其它环境, 切换到最新版
6. nvm use node
7. nvm use stable
8. # 切换到lts其它版本
9. nvm use lts/jod
10. nvm use lts/iron

复制代码

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

1. node -v
2. npm -v

复制代码

Win10 环境准备

以下操作使用 Windows 10 操作系统, 在 PowerShell 命令行窗口操作
使用微软商店安装 fnm

使用系统商店安装 fnm

1. 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中执行

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

复制代码

这时候会创建profile文件, 执行

1. Invoke-Item $profile

复制代码

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

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

复制代码

之后再重新打开 PowerShell
执行以下命令安装不同版本NodeJS

1. # 查看所有可用版本
2. fnm list-remote
3. # 查看已安装的版本
4. fnm list
5. # 安装 NodeJs V22
6. fnm install 22
7. # 安装 NodeJs V23
8. fnm install 23
9. # 查看当前版本
10. fnm current
11. # 切换版本
12. fnm use 22

复制代码

查看 NodeJS 和 npm 版本

1. node -v
2. npm -v

复制代码

其它的常用命令

1. # 查看版本
2. fnm --version
3. # 查看环境变量
4. fnm env

复制代码

注意事项

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

1. npm create vite antd-demo

复制代码

提示选择

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

此时的 antd-demo 目录结构如下

1. ├── eslint.config.js
2. ├── index.html
3. ├── package.json
4. ├── public
5. │   └── vite.svg
6. ├── README.md
7. ├── src
8. │   ├── App.css
9. │   ├── App.tsx
10. │   ├── assets
11. │   │   └── react.svg
12. │   ├── index.css
13. │   ├── main.tsx
14. │   └── vite-env.d.ts
15. ├── tsconfig.app.json
16. ├── tsconfig.json
17. ├── tsconfig.node.json
18. └── vite.config.ts

复制代码

安装依赖包, 这一步会增加很多文件, 依赖包会被放到 node_modules 子目录

1. npm install

复制代码

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

1. npm run dev

复制代码

添加 antd

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

1. npm install antd --save

复制代码

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

1. import React from 'react';
2. import { Button } from 'antd';
4. const App: React.FC = () => (
5.   
6.     <Button type="primary">Button</Button>
7.   
8. );
10. export default App;

复制代码

如果上面的 npm 还在运行, 会自动刷新页面, 此时就能看到页面变成空白, 左侧贴边出现一个按钮
再添加一个日期控件

1. import React from 'react';
2. import { Button } from 'antd';
3. import { DatePicker } from 'antd';
5. const App: React.FC = () => (
6.   
7.          
8.             <Button type="primary">Button</Button>
9.    
10.    
11.             <DatePicker />
12.        
13.   
14. );
16. export default App;

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！