Spring Boot+Vue项目从零入手

创建一个简单的Spring Boot + Vue项目通常涉及以下步骤：

1. 创建Spring Boot后端：

# 使用Spring Initializr创建项目
curl https://start.spring.io/starter.tgz -d dependencies=web,jpa,h2 -d name=backend-service -d package=com.example.backend | tar -xzvf -

2. 添加Vue前端：

# 在Spring Boot项目根目录下
vue create frontend-app

3. 配置Spring Boot以服务静态资源：

// 在Spring Boot项目的Java配置中添加
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
    }
}

4. 构建前端并将其复制到Spring Boot静态资源目录：

# 在Vue项目目录中执行
npm run build
# 将构建的dist目录复制到Spring Boot项目的src/main/resources/static
cp -r frontend-app/dist/* backend-service/src/main/resources/static/

5. 启动Spring Boot应用：

# 在Spring Boot项目目录中执行
mvn spring-boot:run

6. 配置Vue路由使其与后端API对应。
7. 设置Vue项目在生产环境中构建时API接口的基本URL：

# 在Vue项目目录中设置环境变量
echo 'VUE_APP_API_URL=http://localhost:8080/api/' >> .env.production

8. 再次构建并部署前端：

# 在Vue项目目录中执行
npm run build
# 同样复制到Spring Boot静态资源目录
cp -r dist/* backend-service/src/main/resources/static/

9. 启动Spring Boot应用，并确保Vue前端正确加载。

以上步骤提供了一个简化的概述，实际项目可能需要更多配置和安全考虑。