基于 React.js + Node.js + Express.js 的前端作品集项目

安装 nvm for linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.6/install.sh | bash
source ~/.bashrc
nvm --version

如果显示版本号，说明安装成功。

nvm install 20.12.2  #安装指定版本的 Node，本项目推荐 Node v20.12.2
nvm ls-remote        #查看可用 Node 版本
nvm use 20.12.2      #切换版本
node -v              #查看当前版本

安装 nvm for windows

访问官方 GitHub 仓库：

nvm-windows Releases

选择最新的 nvm-setup.zip 或 nvm-setup.exe 下载，安装注意环境变量。

创建项目

npm create vite@latest my-portfolio -- --template react
cd my-portfolio

安装依赖

npm install
npm install plyr
npm install framer-motion react-intersection-observer

构建项目

npm start       #开发模式运行
npm run build   #构建项目

输入构建命令后同时自动执行命令：

在项目目录的 package.json 找到 "scripts" 部分

{
  "scripts": {
    "build": "vite build",
    "postbuild": "rm -rf /var/www/tool/demo/* && cp -r dist/* /var/www/tool/demo/"
  }
}

执行 npm run build 后，会自动删除旧文件并复制新构建内容。