在IDEA中运行Spr这样操作_Initializr_在IDEA中运行Spring和Vue项目这样操作

作者：巡检机器人o1 | 发布时间：2025-06-13 |

在IDEA中运行Spring和Vue项目，这样操作！

一、创建Spring Boot项目

打开IntelliJ IDEA，点击“File” -> “New” -> “Project”。

选择“Spring Initializr”，然后点击“Next”。

填写项目的基本信息（如Group、Artifact等），选择需要的依赖（如Spring Web），然后点击“Next”。

确认项目信息，点击“Finish”完成创建。

二、配置Spring Boot项目

在application.properties或application.yml文件中配置Spring Boot的相关参数。

创建Controller类，处理HTTP请求：

public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

三、创建Vue项目

打开终端，导航到Spring Boot项目的根目录。

使用Vue CLI创建一个新的Vue项目：

vue create vue-project

选择默认配置或者根据需求进行配置，完成创建。

四、配置Vue项目

安装必要的依赖：

npm install

在src目录下创建文件夹，并在其中创建一个文件：

src/components/HelloWorld.vue

在main.js中引入组件：

import HelloWorld from './components/HelloWorld.vue';

Vue.component('hello-world', HelloWorld);

new Vue({
  el: 'app',
  render: h => h(HelloWorld)
});

五、集成Spring Boot和Vue

配置Spring Boot以提供静态资源。在static目录下创建文件夹，并将dist目录下生成的静态文件复制到该文件夹中。

在Spring Boot项目中，配置一个静态资源的访问路径。例如在application.properties中添加：

spring.resources.static-locations=classpath:/static/

修改Vue项目的文件，以便在开发过程中将API请求代理到Spring Boot服务器：

const axios = require('axios');
const api = axios.create({
  baseURL: 'http://localhost:8080'
});

export default api;

六、运行和调试

在IntelliJ IDEA中运行Spring Boot项目。确保Spring Boot项目能够正常启动，并且在浏览器中访问能够看到“Hello, Spring Boot!”。

在终端中，导航到Vue项目的根目录（），运行开发服务器：

npm run serve

在浏览器中访问，应该能够看到Vue应用，并且能够通过Vue组件调用Spring Boot的API。

总结与建议

通过上述步骤，你可以在IntelliJ IDEA中成功运行Spring Boot和Vue项目。

确保Spring Boot和Vue项目的配置正确；
合理使用代理解决跨域问题；
在实际项目中，可以将前后端项目分离部署，以提高系统的可维护性和扩展性。

进一步建议：可以使用前后端分离的CI/CD工具来自动化部署流程，确保代码的持续集成和交付。通过学习和使用更多的Spring Boot和Vue的高级特性，如Spring Security、Vue Router等，可以提高开发效率和系统的安全性。