以下是搭建一个使用Spring Boot 3和Vue 3的项目骨架的步骤：
- 创建Spring Boot项目：
mvn archetype:generate -DgroupId=com.example -DartifactId=novelty-house-backend -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
- 添加Spring Boot和Web依赖到
pom.xml：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
- 创建一个简单的REST控制器
src/main/java/com/example/NoveltyHouseBackendApplication.java：
package com.example;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
public class NoveltyHouseBackendApplication {
public static void main(String[] args) {
SpringApplication.run(NoveltyHouseBackendApplication.class, args);
}
}
@RestController
class HelloController {
@GetMapping("/hello")
public String hello() {
return "Hello, Novelty House!";
}
}
- 创建Vue 3项目：
npm init vue@latest
- 安装必要的依赖，例如Vue Router和Vuex，并创建相应的文件和配置。
- 在
package.json中添加scripts来运行前端和后端：
"scripts": {
"start": "npm run dev",
"dev": "vue-tsc --noEmit && vite",
"build": "vue-tsc && vite build",
"server": "java -jar target/novelty-house-backend-0.0.1-SNAPSHOT.jar"
}
- 创建前端代码，例如在
src/views/HomeView.vue中：
<template>
<div>
<h1>Welcome to Novelty House</h1>
</div>
</template>
<script setup lang="ts">
// TypeScript setup script
</script>
- 在
src/main.ts中启动Vue应用：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- 运行后端Spring Boot应用：
mvn spring-boot:run
- 运行前端应用并确保后端运行中：
npm run start
这样你就搭建了一个使用Spring Boot 3作为后端和Vue 3作为前端的项目骨架，可以在此基础上进行开发。