Node.js环境和antd初始化项目
<h1 id="nodejs-环境准备">Node.js 环境准备</h1><p>为了方便切换 Node.js 版本, 在 Ubuntu 下使用 nvm 做 Node.js 的版本管理, 在 Windows 10 下使用 fnm 做 Node.js 的版本管理</p>
<h2 id="ubuntu-2204-nodejs-环境准备">Ubuntu 22.04 Node.js 环境准备</h2>
<p>以下操作使用 Ubuntu 22.04 环境</p>
<p>访问 Node.js 下载说明页 https://nodejs.org/en/download</p>
<h3 id="安装-nvm">安装 nvm</h3>
<p>nvm 的作用类似于 conda, 可以在用户目录下切换不同版本的Node.js, 安装参考 https://github.com/nvm-sh/nvm 执行以下命令安装 nvm, 升级也是这个命令</p>
<pre><code class="language-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
</code></pre>
<p>安装脚本会将nvm仓库clone到 ~/.nvm, 并在环境脚本 (~/.bashrc, ~/.bash_profile, ~/.zshrc 或 ~/.profile) 中增加配置语句.</p>
<p>安装结束后把命令行窗口关掉重新打开, 就能用 nvm 命令了</p>
<h3 id="nvm-安装管理-nodejs-环境">nvm 安装管理 nodejs 环境</h3>
<p>使用nvm安装各个版本的nodejs环境</p>
<pre><code class="language-bash"># 安装最新版
nvm install node
# install latest version in V22
nvm install 22
</code></pre>
<p>环境切换</p>
<pre><code class="language-bash"># 查看可用的环境, 红色字为可安装但是未安装的环境
nvm list
# 查看当前环境
nvm current
# 切换到其它环境, 切换到最新版
nvm use node
nvm use stable
# 切换到lts其它版本
nvm use lts/jod
nvm use lts/iron
</code></pre>
<p>查看当前环境的node和npm版本</p>
<pre><code class="language-bash">node -v
npm -v
</code></pre>
<h2 id="win10-环境准备">Win10 环境准备</h2>
<p>以下操作使用 Windows 10 操作系统, 在 PowerShell 命令行窗口操作</p>
<h3 id="使用微软商店安装-fnm">使用微软商店安装 fnm</h3>
<p>使用系统商店安装 fnm</p>
<pre><code class="language-bash">winget install Schniz.fnm
</code></pre>
<h3 id="手动安装-fnm">手动安装 fnm</h3>
<p>如果商店无法安装, 可以在 fnm Releases 界面下载 fnm 可执行文件手动安装</p>
<p>将 fnm.exe 解压缩到 C:\Users[你的用户名]\AppData\Roaming\fnm 目录下, 这是默认的 fnm 目录</p>
<p>将其添加到 User PATH, 我的电脑空白处右键 -> 属性 -> 高级系统设置 -> 环境变量 -> 用户环境变量找到 Path -> 编辑 -> 添加一行 <code>C:\Users\[你的用户名]\AppData\Roaming\fnm</code> 把 <code>[你的用户名]</code>改成你的用户名</p>
<p>修改 PowerShell profile, 使其每次启动时, 自动加载 fnm 环境变量, 在PowerShell中执行</p>
<pre><code>if (-not (Test-Path $profile)) { New-Item $profile -Force }
</code></pre>
<p>这时候会创建profile文件, 执行</p>
<pre><code class="language-bash">Invoke-Item $profile
</code></pre>
<p>在打开的编辑器中添加内容</p>
<pre><code>fnm env --use-on-cd --shell powershell | Out-String | Invoke-Expression
</code></pre>
<p>之后再重新打开 PowerShell</p>
<p>执行以下命令安装不同版本NodeJS</p>
<pre><code class="language-bash"># 查看所有可用版本
fnm list-remote
# 查看已安装的版本
fnm list
# 安装 NodeJs V22
fnm install 22
# 安装 NodeJs V23
fnm install 23
# 查看当前版本
fnm current
# 切换版本
fnm use 22
</code></pre>
<p>查看 NodeJS 和 npm 版本</p>
<pre><code class="language-bash">node -v
npm -v
</code></pre>
<p>其它的常用命令</p>
<pre><code class="language-bash"># 查看版本
fnm --version
# 查看环境变量
fnm env
</code></pre>
<h2 id="注意事项">注意事项</h2>
<p>使用 nvm 和 fnm 管理 Node.js 版本后, 就不要在环境里更新 Node.js 和 npm 的版本</p>
<h1 id="使用-npm-和-vite-创建项目">使用 npm 和 vite 创建项目</h1>
<pre><code class="language-bash">npm create vite antd-demo
</code></pre>
<p>提示选择</p>
<ul>
<li>Select a framework: React</li>
<li>Select a variant: TypeScript</li>
</ul>
<p>此时的 antd-demo 目录结构如下</p>
<pre><code>├── 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
</code></pre>
<p>安装依赖包, 这一步会增加很多文件, 依赖包会被放到 node_modules 子目录</p>
<pre><code class="language-bash">npm install
</code></pre>
<p>运行项目, 根据提示访问 http://localhost:5173/ 就能看到界面效果了</p>
<pre><code class="language-bash">npm run dev
</code></pre>
<h1 id="添加-antd">添加 antd</h1>
<p>在项目目录下执行以下命令导入antd 和 @ant-design 等依赖包</p>
<pre><code class="language-bash">npm install antd --save
</code></pre>
<p>编辑项目文件 src/App.tsx 修改内容为</p>
<pre><code class="language-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;
</code></pre>
<p>如果上面的 npm 还在运行, 会自动刷新页面, 此时就能看到页面变成空白, 左侧贴边出现一个按钮</p>
<p>再添加一个日期控件</p>
<pre><code class="language-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;
</code></pre><br><br>
来源：https://www.cnblogs.com/milton/p/18790536
頁:
[1]