创建springboot的前端项目

步骤 1: 创建Spring Boot项目

首先，确保你的Spring Boot项目已经创建并设置好。你可以使用Spring Initializr（https://start.spring.io/）来快速生成项目。

步骤 2: 创建Vue前端应用

1. 安装Node.js和npm（如果尚未安装）。

2. 使用以下命令安装Vue CLI：

   npm install -g @vue/cli

3. 创建一个新的Vue应用：

   vue create vue-app
   cd vue-app

步骤 3: 开发Vue应用

在vue-app目录中，你可以编辑src/App.vue来添加你的前端代码。例如，创建一个简单的计数器应用：

<template>
  <div>
    <p>You clicked {{ count }} times</p>
    <button @click="increment">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

步骤 4: 构建并集成Vue应用

1. 在vue-app目录中，运行以下命令来构建应用：

   npm run build

2. 将构建产物（通常在vue-app/dist目录下）复制到Spring Boot的src/main/resources/static目录。这样，Spring Boot就可以作为静态资源来托管这些文件。

步骤 5: 配置Spring Boot以托管Vue应用

确保Spring Boot的控制器能够正确地将所有路由指向index.html，这样Vue Router就可以接管前端路由。

在Spring Boot项目中添加一个控制器，如下所示：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HomeController {
    @RequestMapping(value = "/{path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

步骤 6: 运行你的应用

现在，你可以启动Spring Boot应用，并在浏览器中访问http://localhost:8080来查看你的Vue应用。

1.先进入目录，再运行
   

npm run serve

通过这些步骤，你可以将Vue作为前端UI与Spring Boot后端集成在一起。这种方法适用于将前端和后端部署在同一个服务器上的情况。