Vue3 + JS + pnpm 创建项目

雪芽蓝域zzs2026-08-27 8:58

Vue3 + JS + pnpm 创建项目

一、创建项目

1. 使用 pnpm 创建 vue 项目

打开终端（Windows 下推荐使用 PowerShell 或 CMD，macOS/Linux 使用自带的 Terminal），执行下面的命令来初始化一个 Vue3 项目：

复制代码

pnpm create vue@latest

执行后，命令行会进入交互式问答界面，依次询问项目名称、是否启用 TypeScript 等选项。这里我们统一选择 JavaScript（不是 TS），其余选项按下面的清单勾选即可：

复制代码

✔ Project name: › vue3‑ruoyi‑admin
✔ Add TypeScript? ... No
✔ 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 Test Solution? ... No
✔ Add ESLint for code quality? ... Yes
✔ Add Prettier for code formatting? ... Yes

所有选项确认后，脚手架会自动生成项目目录和基础文件，并提示后续操作步骤。此时项目骨架已经搭建完成，接下来进入依赖安装与启动环节：

复制代码

cd vue3‑ruoyi‑admin
pnpm install
pnpm run dev

在浏览器中访问 http://localhost:5173，如果能看到 Vue 官方默认的欢迎页面，说明项目已经成功跑起来了。这个默认页面虽然简单，但它验证了从创建、安装依赖到启动的整条链路都是通的，后续我们就在这个基础上开始仿若依的改造。

2. 安装依赖包（仿若依必备）

项目跑通后，接下来安装仿若依后台管理必备的依赖包。这些包分别负责 UI 组件、网络请求、图标和样式预处理，是后续搭建布局和权限体系的基础：

c 复制代码

# element-plus UI库
pnpm add element-plus
# axios 请求库
pnpm add axios
# icon 图标（elementplus图标）
pnpm add @element-plus/icons-vue
# scss 样式
pnpm add -D sass

c 复制代码

# 运行时依赖
pnpm add vue-router@4 pinia element-plus axios

# unplugin 按需导入插件（开发依赖 -D）
pnpm add -D unplugin-vue-components unplugin-auto-import