基于 React + TailwindCSS + Plyr.js 的前端作品集项目

创建 Vite + React 项目

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

安装依赖

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

安装 TailwindCSS + 依赖\

npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p

此处需要注意

npm ERR! could not determine executable to run 
npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache_logs\2025-05-24T07_09_25_220Z-debug-0.log 

如出现上面的报错，这是由于执行 npm install -D tailwindcss postcss autoprefixer 命令后自动下载的是4.1.7版本，而官网的版本最高是3.4.17。

改为：npm install -D tailwindcss@3.4.17 postcss autoprefixer 即可。

构建项目

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 后，会自动删除旧文件并复制新构建内容。