一、需求
作为前端小白，我需要快速学习前端的相关内容，我根据公司的技术栈Vue3 + Element Plus 在github上找的一个开源项目学习，虽然现在AI生成前端代码很快，但是目前使用下来，如果不了解前端框架的一些内容，还是比较难改错的。此系列教程目的是记录开源前端项目的安装、启动、分析架构、修改代码实现自己的业务逻辑、总结经验，避免从0到1的学习前端的语法之类的。
二、项目介绍
技术栈：
Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API
Element Plus：Element UI 的 Vue3 版本
Pinia：传说中的 Vuex5
Vite：真的很快
Vue Router：路由路由
TypeScript：JavaScript 语言的超集
pnpm：更快速的，节省磁盘空间的包管理工具
Scss：和 Element Plus 保持一致
CSS 变量：主要控制项目的布局和颜色
ESLint：代码校验与格式化
Axios：发送网络请求（已封装好）
UnoCSS：具有高性能且极具灵活性的即时原子化 CSS 引擎
三、项目安装
3.1 安装node
去 node 官网下载并安装 node 环境：nodejs.org/zh-cn ，一般选择最新的 LTS （长期维护）版本即可,
输入下述命令检测安装版本
node -v
npm -v
3.2 安装PNPM
由于 V3 Admin Vite 是推荐使用 pnpm 命令来安装第三方依赖，而不是直接使用 npm 命令。所以这边要提前将 pnpm 安装好
npm install -g pnpm
安装后同样也是使用 -v 命令来查看版本: pnpm -v
3.3 下载代码
git clone https://github.com/un-pany/v3-admin-vite.git
git clone https://gitee.com/un-pany/v3-admin-vite.git # 网络不好可以用这个
我使用的IDE是TRAE，类似于Vscode
3.4 安装相关插件
项目很贴心的给出了这个项目的rules，到时候直接复制粘贴到TRAE里面，利用AI来基于这个模版来进行二次开发。在.vscode目录下，把这些插件在插件市场一个个搜索下载，然后重启TRAE。
注意：Vue3 项目对应的是 Volar 插件，记得禁用 Vue2 的 Vetur 插件！
3.5 安装项目依赖
pnpm i
安装完依赖，目录下会出现，node_modules目录，里面是安装的包。
对比Python的uv管理项目，前端的pnpm管理的项目是这样的。
| 特性 | Python (uv) | 前端 (pnpm / npm / yarn) |
|---|---|---|
| 依赖声明文件 | pyproject.toml或 requirements.txt |
**package.json** |
| 锁定文件 | uv.lock |
**pnpm-lock.yaml** (pnpm) |
| 依赖安装位置 | 通常是独立的虚拟环境目录 (如 .venv) |
项目下的 node_modules目录 |
| 环境隔离方式 | 需手动创建并激活虚拟环境 (source .venv/bin/activate) |
依赖自动安装在项目内的 node_modules，天然隔离 |
3.6 启动项目
pnpm dev
pnpm dev实际上是 pnpm run dev的简写形式它的具体行为并非由 pnpm 本身决定，而是完全依赖于项目根目录下 package.json文件中的 scripts配置你可以把 package.json中的 scripts字段理解为一个"命令别名"列表
本项目相当于是执行vite命令。
当执行 vite命令时，系统会找到项目 node_modules目录下 Vite 包提供的可执行脚本（通常是 node_modules/.bin/vite）。这个脚本最终会调用 Vite 的 CLI（命令行接口）程序。
它通过无需打包 和按需编译的方式，为你提供了闪电般的启动速度和流畅的热更新体验，极大地提升了开发效率。
四、参考内容
2025终极指南：v3-admin-vite骨架屏全攻略------从0到1构建高性能加载体验-CSDN博客
【V3 Admin Vite 5.x】教程一：环境、下载、运行项目本系列教程是为了帮助没有能力直接上手（或上手比较困难） - 掘金