Vue3 + Spring Boot 前后端分离项目搭建

前言：Vue3 + Spring Boot 前后端分离项目搭建说明

在机器人设备管理平台等场景中，前后端分离的架构已成为主流选择。本项目旨在通过 Vue3 + Element Plus 实现前端控制界面，结合 Spring Boot 提供后端接口服务，构建一个用于机器人设备（如扫地机器人、仿生机械狗）状态监控与控制的基础系统。

本搭建过程面向具备一定 Java 和前端基础的开发者，目标是完成：

• Spring Boot 后端接口开发（用于提供机器人数据与控制指令 API）

• Vue3 前端页面搭建（展示机器人列表，进行状态控制）

• Axios 与 Router 等前端模块联调

• Element Plus 表格与按钮操作集成

整个项目遵循前后端解耦，接口通过 http://localhost:8080 提供服务，前端运行于 http://localhost:5173。

以下内容将完整展示后端代码结构与前端页面逻辑，适合作为后续接入 MQTT、WebSocket、地图定位、权限登录等功能的基础框架。

目录

前言：Vue3 + Spring Boot 前后端分离项目搭建说明

 一、全流程步骤总览

二、详细步骤指南

步骤1：安装 Node.js 和 npm

步骤2：安装 Vite 并创建 Vue 项目

步骤3：用 VS Code 打开项目

步骤4：安装 Element Plus 和 Axios

步骤5：创建并替换页面

可选：设置路由（方便页面跳转）

步骤6：运行项目

常见问题

 一、全流程步骤总览

我们使用VSCode 编辑器 + Vue 插件

二、详细步骤指南

步骤1：安装 Node.js 和 npm

访问官网下载安装 Node.js（会自动包含 npm）：

👉 官网：Node.js — Run JavaScript Everywhere

建议版本：LTS（长期支持）版本，18 或以上

安装后验证：

node -v npm -v

步骤2：安装 Vite 并创建 Vue 项目

打开终端（可在 VS Code 里按 Ctrl+` 打开），运行：

npm create vite@latest robot-ui

根据提示选择：

• ✔ 项目名：robot-ui

• ✔ 框架：Vue

• ✔ 变体：JavaScript（或 TypeScript，任选）

然后进入项目并安装依赖：

cd robot-ui npm install

步骤3：用 VS Code 打开项目

回到 VS Code：

• 点左上角菜单 File → Open Folder...

• 选择刚创建的 robot-ui 文件夹

• 等待加载完成后，项目结构大概如下：

robot-ui/
├─ public/
├─ src/
│  ├─ assets/
│  ├─ App.vue
│  ├─ main.js
├─ index.html
├─ vite.config.js

步骤4：安装 Element Plus 和 Axios

在项目根目录下运行：

npm install element-plus axios

在 main.js 中添加全局引入：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

步骤5：创建并替换页面

在 src/ 下新建目录 views，并在其中添加：

src/views/RobotList.vue

然后把你 canvas 中的 RobotList.vue 代码粘贴进去即可（你已经有完整代码）。

可选：设置路由（方便页面跳转）

npm install vue-router

然后在 src/router/index.js 添加：

import { createRouter, createWebHistory } from 'vue-router'
import RobotList from '../views/RobotList.vue'

const routes = [{ path: '/', component: RobotList }]

export default createRouter({
  history: createWebHistory(),
  routes,
})

并在 main.js 中启用路由：

import router from './router'
createApp(App).use(router).use(ElementPlus).mount('#app')

步骤6：运行项目

npm run dev

打开浏览器访问：

（这个是有错误的）

http://localhost:5173

如果你的 Spring Boot 后端也已运行，你将看到一个机器人表格页面，并可点击发送控制指令。

常见问题