从零搭建【pnpm+Vue3+TS+Setup+VueRouter4+Pinia+Axios+ElementPlus (unplugin 按需)】仿若依后台

从零搭建【pnpm+Vue3+TS+Setup+VueRouter4+Pinia+Axios+ElementPlus (unplugin 按需)】仿若依后台

项目特点：

1. 全部 <script setup> 组合式语法，抛弃选项式
2. 目录结构优化：layout 和 components 同级（不和 views 嵌套，区别原版若依）
3. 环境变量拆分：.env.development / .env.production
4. 手写 mock（不引入 mockjs 插件），支持一键切换「本地模拟数据 / 真实后端接口」
5. Element Plus 使用 unplugin 自动按需导入，不用全量引入
6. 用 pnpm，Typescript，Vue Router4，Pinia，Axios

---

第 0 章：前置准备

0.1 环境要求

• Node.js >= 18.x（推荐 20 LTS）
• pnpm 已经安装

安装 pnpm（终端执行）

npm install -g pnpm

检查版本：

node -v
pnpm -v

✅ 输出版号即正常。

---

第 1 章：使用 pnpm create vue@latest 创建基础 Vue3+TS 项目

1.1 创建项目命令

打开终端，cd 到你想要存放项目的文件夹，执行：

pnpm create vue@latest

然后交互式选项，严格按下面选（重点！）

✔ Project name: ... vue3-admin
✔ Add TypeScript? ... Yes
✔ Add JSX Support? ... No
✔ Add Vue Router for Single Page Application development? ... Yes
✔ Add Pinia for state management? ... Yes
✔ Add Vitest for Unit testing? ... No
✔ Add an End-to-End Testing Solution? ... No
✔ Add ESLint for code quality? ... Yes
✔ Add Prettier for code formatting? ... Yes

项目名：vue3-admin

创建完成提示：

cd vue3-admin
pnpm install
pnpm dev

1.2 进入项目 & 安装依赖

cd vue3-admin
pnpm install

1.3 启动开发服务测试

pnpm dev

浏览器打开提示地址（一般 http://localhost:5173/）

看到 vue 默认欢迎页面，代表基础项目创建成功。

✅ 本章测试点：

1. pnpm create vue 成功生成目录
2. pnpm install 无报错
3. pnpm dev 启动，网页正常打开

你现在执行完这一步，确认有没有报错，网页能不能打开。