【Spring Boot 3 + Vue 3】小说精品屋前后端分离学习版项目搭建

以下是搭建一个使用Spring Boot 3和Vue 3的项目骨架的步骤：

1. 创建Spring Boot项目：

mvn archetype:generate -DgroupId=com.example -DartifactId=novelty-house-backend -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false

2. 添加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>

3. 创建一个简单的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!";
    }
}

4. 创建Vue 3项目：

npm init vue@latest

5. 安装必要的依赖，例如Vue Router和Vuex，并创建相应的文件和配置。
6. 在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"
}

7. 创建前端代码，例如在src/views/HomeView.vue中：

<template>
  <div>
    <h1>Welcome to Novelty House</h1>
  </div>
</template>
 
<script setup lang="ts">
// TypeScript setup script
</script>

8. 在src/main.ts中启动Vue应用：

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

9. 运行后端Spring Boot应用：

mvn spring-boot:run

10. 运行前端应用并确保后端运行中：

npm run start

这样你就搭建了一个使用Spring Boot 3作为后端和Vue 3作为前端的项目骨架，可以在此基础上进行开发。