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
org.springframework.boot
spring-boot-starter-web创建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项目并运行它。
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
相关推荐: 自研API 网关 – 媲美美团这套Shepherd网关架构！
作者：小傅哥 博客：https://bugstack.cn 沉淀、分享、成长，让自己和他人都能有所收获！😄 我说：”很多互联网大厂，很少基于 SpringMVC 模块对外提供 WEB 服务的 HTTP 接口！” 一下炸窝了，你说，哪个厂不用，你说。还，还不用 …
