搭建vue3后台管理系统页面，与vue2基本一致，方便以后可以快速搭建，现在将基础搭建以及若依框架搭建流程再次梳理一下

---

环境准备

1. Node.js环境安装

前置条件 - 已安装16.0或更高版本的Node.js

2. 推荐包管理器：pnpm

pnpm 包管理器 - 创建项目：比同类工具快 2倍 左右、节省磁盘空间… https://www.pnpm.cn/

安装方式：

npm install -g pnpm

3. 安装create-vue工具

执行如下命令，这一指令将会安装并执行 create-vue创建项目

npm init vue@latest

接下来就可以直接搭建vue3项目

方式一：脚手架搭建vue3项目

vue2中使用的脚手架vue-cli搭建项目，Vue官方新的脚手架工具是create-vue，底层切换到了 vite下一代前端工具链），为开发提供极速响应

npm：

npm create vue

pnpm：

pnpm create vue

• TypeScript: 提供静态类型检查，提高代码的健壮性和可维护性。

• JSX: 通常在 Vue 项目中不使用 JSX，因此选择 No。

• Vue Router: 必须的，因为这是一个单页面应用。

• Pinia: 用于管理全局状态，适合中大型项目。

• Vitest: 用于编写单元测试，确保每个组件和函数的正确性。

• Cypress: 用于端到端测试，模拟用户行为，确保整个应用的功能正常。

• ESLint: 保持代码一致性和高质量，减少错误。

• Prettier: 用于美化代码

cd vue3-demo

pnpm install

pnpm dev

（npm亦是如此）
项目创建完成后，项目目录结构如下：

vue3-demo
├── node_modules/       // 项目依赖
├── public/             // 公共静态资源
│   └── index.html      // 入口HTML文件
├── src/                // 源码目录
│   ├── assets/         // 静态资源
│   ├── components/     // Vue组件
│   ├── App.vue         // 根组件
│   ├── main.js         // 项目入口文件
├── .gitignore          // Git忽略文件
├── babel.config.js     // Babel配置
├── package.json        // 项目配置文件
└── README.md           // 项目说明文件

方式二：使用若依搭建vue3项目

若依基本延续Ruo-Yi-Vue2的风格搭建后台管理系统，好处就在在于，搭建快捷，上手快，功能完善，减少项目搭建时间。respect！

若依官网地址

RuoYi-Vue3项目代码地址：RuoYi-Vue3–git地址

若依官方地址：RuoYi v4.7.9
基于SpringBoot开发的轻量级Java快速开发框架

1.安装

由于官网安装步骤介绍比较详细，我这里简单梳理一下流程：

1.1 方式1：克隆项目

# 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git

# 进入项目目录
cd RuoYi-Vue3

# 安装依赖
npm install

# 启动服务
npm run dev 

1.2 方式2：下载zip

到此就说明搭建成功

2.说明

文件结构说明，内置菜单等等，文档都有详细说明，官方文档非常详细：前端结构
我这里主要说一下搭建项目之后要去除一下，若依的相关内容，logo、图片、若依文本等相关内容，我这里做了一下格式化剔除若依相关的版本放在资源中，需要取用即可