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

步骤	操作
1️⃣	安装 Node.js 和 npm
2️⃣	安装 Vite（创建 Vue 项目）
3️⃣	使用 VS Code 打开项目
4️⃣	安装 Element Plus 和 Axios
5️⃣	创建 `RobotList.vue` 页面
6️⃣	运行项目进行联调

二、详细步骤指南

步骤1：安装 Node.js 和 npm

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

👉 官网：Node.js --- Run JavaScript Everywhere

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

安装后验证：

bash 复制代码

node -v npm -v

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

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

bash 复制代码

npm create vite@latest robot-ui

根据提示选择：

✔ 项目名：robot-ui
✔ 框架：Vue
✔ 变体：JavaScript（或 TypeScript，任选）

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

bash 复制代码

cd robot-ui npm install

步骤3：用 VS Code 打开项目

回到 VS Code：

点左上角菜单 File → Open Folder...
选择刚创建的 robot-ui 文件夹
等待加载完成后，项目结构大概如下：

bash 复制代码

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

复制代码

步骤4：安装 Element Plus 和 Axios

在项目根目录下运行：

复制代码

bash 复制代码

npm install element-plus axios

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

复制代码

javascript 复制代码

// 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，并在其中添加：

bash 复制代码

src/views/RobotList.vue

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

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

bash 复制代码

npm install vue-router

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

复制代码

javascript 复制代码

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 中启用路由：

javascript 复制代码

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

步骤6：运行项目

bash 复制代码

npm run dev

打开浏览器访问：

（这个是有错误的）

bash 复制代码

http://localhost:5173

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

常见问题

问题	解决方式
跨域报错	确保后端加了 `@CrossOrigin` 注解，或配置全局 CORS
接口访问不到	检查后端端口 `8080` 是否运行成功
页面空白	控制台是否报错，检查 Axios 请求路径拼写和组件挂载是否正确