springboot +vue教程

关于 Spring Boot 和 Vue 的整合使用
项目初始化与配置
为了创建一个基于 Spring Boot 和 Vue 的全栈应用，首先需要分别设置好后端和前端环境。对于后端而言，Spring Initializr 是一种快速启动的方式[^1]。
mvn io.quarkus:quarkus-DprojectGroupId=com.example \
-DprojectArtifactId=backend-springboot-Dpath="/api"
登录后复制
上述命令用于通过 Maven 创建一个新的 Spring Boot 应用程序，注意这里指定了包名、项目名称以及应用程序类的位置，并设置了 API 路径前缀为 /api。然而，更常见的做法是在浏览器访问 start.spring.io 并下载所需的依赖项来构建服务端工程。
接着，在客户端方面，则可以利用 vue-cli 来建立新的 Vue 工程：
npm install -g @vue/cli
vue create frontend-vue-app
cd frontend-vue-app
登录后复制
这组指令会全局安装 Vue CLI 工具并新建名为 frontend-vue-app 的 Vue 项目目录。进入该目录之后可以根据提示进一步定制化配置选项，比如选择预处理器（Sass/SCSS）、路由器支持等特性[^2]。
前后端联调准备
完成各自框架的基础搭建工作以后，就需要考虑如何让两者协同运作起来。通常情况下，Vue 应用会被编译成静态资源文件放置到 Nginx 或者 Tomcat 中作为独立的应用运行；而另一种方式就是将其打包进 JAR 文件内部由 Spring Boot 启动时自动加载显示给用户浏览。后者可以通过调整 Webpack 构建工具链实现自动化流程处理。
当采用第二种方案时，需修改 pom.xml 添加如下插件片段以便能够识别 HTML 页面入口点并将它们嵌入最终可执行 jar 包内:
<build>
...
<plugins>
<!-- Other plugins -->

<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>front-end-maven-plugin</artifactId>
<version>1.8.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals><goal>install-node-and-npm</goal></goals>
<phase>generate-resources</phase>
<configuration>
<nodeVersion>v14.17.0</nodeVersion>
<npmVersion>6.14.13</npmVersion>
</configuration>
</execution>

<execution>
<id>npm install</id>
<goals><goal>npm</goal></goals>
<phase>generate-resources</phase>
<configuration>
<arguments>ci --quiet</arguments>
</configuration>
</execution>

<execution>
<id>npm run build</id>
<goals><goal>npm</goal></goals>
<phase>compile</phase>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>

...
</build>
登录后复制
这段 XML 片段定义了一系列任务用来确保每次构建过程中都会先更新 Node.js 及其配套软件包管理器 NPM 到指定版本，再执行一次完整的生产模式下的优化编译过程，最后把生成的结果复制至合适位置供后续步骤读取引用。
另外还需更改 Vue 配置中的公共路径(publicPath)属性指向根级别(/)而非默认相对地址(./)，从而允许被正确解析定位静态资产链接关系。编辑位于项目根部的 vue.config.js 文件加入下面几行代码即可达成目的：
module.exports = {
publicPath: '/'
};
登录后复制
至此已经完成了大部分准备工作，剩下便是编写业务逻辑接口对接前后两端数据交互需求了。此时建议遵循 RESTful 设计原则规划 URL 结构样式，同时借助 Axios HTTP 客户端发起请求操作并与服务器交换 JSON 数据格式的信息流。