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

项目特点：

全部 <script setup> 组合式语法，抛弃选项式

目录结构优化：layout 和 components 同级（不和 views 嵌套，区别原版若依）

环境变量拆分：.env.development / .env.production

手写 mock（不引入 mockjs 插件），支持一键切换「本地模拟数据 / 真实后端接口」

Element Plus 使用 unplugin 自动按需导入，不用全量引入

用 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 默认欢迎页面，代表基础项目创建成功。

✅ 本章测试点：

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

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