从零搭建【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 启动，网页正常打开
你现在执行完这一步，确认有没有报错，网页能不能打开。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/qq_36158551/article/details/168115749
