一、需求作为前端小白我需要快速学习前端的相关内容我根据公司的技术栈Vue3 Element Plus在github上找的一个开源项目学习虽然现在AI生成前端代码很快但是目前使用下来如果不了解前端框架的一些内容还是比较难改错的。此系列教程目的是记录开源前端项目的安装、启动、分析架构、修改代码实现自己的业务逻辑、总结经验避免从0到1的学习前端的语法之类的。二、项目介绍技术栈Vue3采用 Vue3 script setup 最新的 Vue3 组合式 APIElement PlusElement UI 的 Vue3 版本Pinia传说中的 Vuex5Vite真的很快Vue Router路由路由TypeScriptJavaScript 语言的超集pnpm更快速的节省磁盘空间的包管理工具Scss和 Element Plus 保持一致CSS 变量主要控制项目的布局和颜色ESLint代码校验与格式化Axios发送网络请求已封装好UnoCSS具有高性能且极具灵活性的即时原子化 CSS 引擎三、项目安装3.1 安装node去 node 官网下载并安装 node 环境nodejs.org/zh-cn 一般选择最新的LTS长期维护版本即可,输入下述命令检测安装版本node -vnpm -v3.2 安装PNPM由于V3 Admin Vite是推荐使用 pnpm 命令来安装第三方依赖而不是直接使用 npm 命令。所以这边要提前将 pnpm 安装好npm install -g pnpm安装后同样也是使用-v命令来查看版本:pnpm -v3.3 下载代码git clone https://github.com/un-pany/v3-admin-vite.gitgit clone https://gitee.com/un-pany/v3-admin-vite.git # 网络不好可以用这个我使用的IDE是TRAE类似于Vscode3.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.txtpackage.json锁定文件uv.lockpnpm-lock.yaml (pnpm)依赖安装位置通常是独立的虚拟环境目录 (如.venv)项目下的node_modules目录环境隔离方式需手动创建并激活虚拟环境 (source .venv/bin/activate)依赖自动安装在项目内的node_modules天然隔离3.6 启动项目pnpm devpnpm 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】教程一环境、下载、运行项目本系列教程是为了帮助没有能力直接上手或上手比较困难 - 掘金
V3 Admin Vite 5.0 开源项目剖析【一】
发布时间：2026/5/22 20:03:08
一、需求作为前端小白我需要快速学习前端的相关内容我根据公司的技术栈Vue3 Element Plus在github上找的一个开源项目学习虽然现在AI生成前端代码很快但是目前使用下来如果不了解前端框架的一些内容还是比较难改错的。此系列教程目的是记录开源前端项目的安装、启动、分析架构、修改代码实现自己的业务逻辑、总结经验避免从0到1的学习前端的语法之类的。二、项目介绍技术栈Vue3采用 Vue3 script setup 最新的 Vue3 组合式 APIElement PlusElement UI 的 Vue3 版本Pinia传说中的 Vuex5Vite真的很快Vue Router路由路由TypeScriptJavaScript 语言的超集pnpm更快速的节省磁盘空间的包管理工具Scss和 Element Plus 保持一致CSS 变量主要控制项目的布局和颜色ESLint代码校验与格式化Axios发送网络请求已封装好UnoCSS具有高性能且极具灵活性的即时原子化 CSS 引擎三、项目安装3.1 安装node去 node 官网下载并安装 node 环境nodejs.org/zh-cn 一般选择最新的LTS长期维护版本即可,输入下述命令检测安装版本node -vnpm -v3.2 安装PNPM由于V3 Admin Vite是推荐使用 pnpm 命令来安装第三方依赖而不是直接使用 npm 命令。所以这边要提前将 pnpm 安装好npm install -g pnpm安装后同样也是使用-v命令来查看版本:pnpm -v3.3 下载代码git clone https://github.com/un-pany/v3-admin-vite.gitgit clone https://gitee.com/un-pany/v3-admin-vite.git # 网络不好可以用这个我使用的IDE是TRAE类似于Vscode3.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.txtpackage.json锁定文件uv.lockpnpm-lock.yaml (pnpm)依赖安装位置通常是独立的虚拟环境目录 (如.venv)项目下的node_modules目录环境隔离方式需手动创建并激活虚拟环境 (source .venv/bin/activate)依赖自动安装在项目内的node_modules天然隔离3.6 启动项目pnpm devpnpm 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】教程一环境、下载、运行项目本系列教程是为了帮助没有能力直接上手或上手比较困难 - 掘金
