download：极客工夫训练营高级 Java 工程师体系课 2023 版 2.0
用 SpringBoot 和 Vue3 开发古代 Web 利用
随着 Web 利用的日益遍及，前后端拆散的架构形式越来越受到欢送。在这种状况下，应用 SpringBoot 和 Vue3 是一个不错的抉择。本文将介绍如何应用 SpringBoot 和 Vue3 构建古代 Web 利用。
筹备工作
在开始之前，咱们须要确保咱们曾经装置了以下软件：
Java SDK 11 或以上
Node.js 和 npm
Vue CLI 4
IntelliJ IDEA 或 Eclipse
创立 SpringBoot 我的项目
首先，咱们须要创立一个 SpringBoot 我的项目。能够通过 IntelliJ IDEA 或 Eclipse 来实现这个工作。如果你应用 IntelliJ IDEA，能够依照以下步骤来创立一个 SpringBoot 我的项目：
关上 IntelliJ IDEA 并抉择“Create New Project”。
抉择“Spring Initializr”我的项目类型，并单击“Next”。
在下一步中，填写你的我的项目信息，例如项目名称、形容、包名、Java 版本等，并单击“Next”。
抉择你须要增加的组件，但不要抉择“Spring Web”，因为咱们会在前面手动增加它。单击“Next”。
最初，抉择你的我的项目存储地位，并单击“Finish”。
当初，咱们曾经胜利地创立了一个 SpringBoot 我的项目。
增加 Spring Web 依赖
接下来，咱们须要增加 Spring Web 依赖以反对 Web 服务。在 pom.xml 文件中，增加如下依赖：
xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId></dependency>
创立 Vue3 我的项目
当初，咱们须要创立一个 Vue3 我的项目。能够通过 Vue CLI 来实现这个工作。在终端窗口中执行以下命令：
vue create my-app
其中，“my-app”是你的项目名称。
运行 Vue3 我的项目
接下来，咱们须要运行 Vue3 我的项目。在终端窗口中执行以下命令：
cd my-app
npm run serve
当初，咱们曾经胜利地创立了一个 Vue3 我的项目，并且曾经能够在浏览器中看到它的成果。
集成 SpringBoot 和 Vue3
当初，咱们须要将 SpringBoot 和 Vue3 集成在一起。首先，咱们须要将 Vue3 编译为动态资源并将其复制到 SpringBoot 我的项目的“resources/static”目录中。能够通过批改 Vue3 我的项目的“vue.config.js”文件来实现这一点：
javascript
module.exports = {
outputDir: '../src/main/resources/static',
indexPath: '../static/index.html'}
而后，在 SpringBoot 我的项目的“application.properties”文件中增加以下配置项：
spring.mvc.view.prefix=/static/
spring.mvc.view.suffix=.html
最初，咱们须要在 SpringBoot 我的项目中创立一个控制器类来解决申请。例如，以下代码将返回 Vue3 的首页：
java
@Controller
public class HomeController {
@GetMapping(“/”)
public String home() {
return "index";}
}
当初，咱们曾经胜利地将 SpringBoot 和 Vue3 集成在一起。
论断
本文介绍了如何应用 SpringBoot 和 Vue3 构建古代 Web 利用。首先，咱们创立了一个 SpringBoot 我的项目并增加了 Spring Web 依赖。而后，咱们创立了一个 Vue3 我的项目并运行它。