从 0 开始实现一个 SpringBoot + Vue 项目

实现一个 SpringBoot + Vue 项目需要以下步骤：

1. 创建 Vue 前端项目：

# 安装 Vue CLI
npm install -g @vue/cli
 
# 创建新的 Vue 项目
vue create my-vue-app

2. 创建 SpringBoot 后端项目：

# 使用 Spring Initializr 快速生成项目
https://start.spring.io/
 
# 将生成的项目导入到 IDE 中，比如 IntelliJ IDEA 或者 Eclipse

3. 在 Vue 项目中集成并启动前端服务（开发模式）：

cd my-vue-app
npm run serve

4. 在 SpringBoot 项目中设置 CORS 跨域处理，并创建 API 接口：

// 在 SpringBoot 配置文件 application.properties 中添加 CORS 配置
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=128KB
spring.servlet.multipart.max-request-size=128KB
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:8080");
    }
}
 
@RestController
public class MyController {
 
    @GetMapping("/api/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello from SpringBoot");
    }
}

5. 在 Vue 前端中发起 API 请求：

// 在 Vue 组件中
<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.axios.get('http://localhost:8080/api/data');
        this.message = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

6. 配置 SpringBoot 项目使其与前端运行在同一主机和端口上，或者通过代理配置让 Vue 前端请求被代理到 SpringBoot 后端服务：

// 在 Vue 项目中 vue.config.js 文件
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

7. 构建并部署前后端应用：

# 构建 Vue 前端项目
cd my-vue-app
npm run build
 
# 构建 SpringBoot 后端项目
# 使用 Maven 或 Gradle 构建 JAR 或 WAR 包
# 部署到服务器，例如使用 Spring Boot Maven Plugin 或者 jar 命令

以上步骤提供了一个简化的流程，实际项目中还需要考虑更多细节，如数据库连接、认证和授权、日志记录、单元测试、持续集成等。