springboot怎么使用vue做前后端分离

Spring Boot 和 Vue.js 都是非常流行的技术，可以使用它们来开发前后端分离的应用程序。

下面是一些步骤：

1. 创建一个 Spring Boot 项目

可以使用 Spring Initializr 创建一个新的 Spring Boot 项目，该项目包含 Web 和 Thymeleaf 依赖项。

2. 添加 Vue.js

使用 npm 安装 Vue.js，并将其添加到你的项目中。可以使用以下命令进行安装：

npm install -g vue

3. 创建 Vue.js 应用程序

在你的项目中创建一个名为 "frontend" 的目录，并在其中创建一个名为 "src" 的子目录。在 "src" 目录中创建一个名为 "main.js" 的文件，并将以下内容添加到该文件中：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

在 "src" 目录中创建一个名为 "App.vue" 的文件，并将以下内容添加到该文件中：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

4. 使用 Webpack 打包 Vue.js 应用程序

使用 Webpack 打包 Vue.js 应用程序，将生成的文件放置在 "src/main/resources/static" 目录下。

5. 配置 Spring Boot

在 Spring Boot 应用程序中配置静态资源路径，以便可以在浏览器中访问 Vue.js 应用程序。

可以在 "application.properties" 文件中添加以下内容：

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

6. 运行应用程序

使用以下命令在本地运行应用程序：

./mvnw spring-boot:run

然后，在浏览器中访问 "http://localhost:8080"，即可看到 Vue.js 应用程序。

这只是一个简单的例子，你可以在此基础上进一步扩展你的应用程序，例如：使用 REST API 与后端通信，使用 Vuex 管理状态等。