springboot vue环境

### 配置Spring Boot与Vue.js的开发环境 #### 1. 开发工具准备 为了顺利搭建Spring Boot和Vue.js的应用程序，需准备好必要的开发工具。这包括但不限于JDK、Node.js以及相应的集成开发环境(IDE)，如IntelliJ IDEA或者Visual Studio Code等[^2]。 #### 2. 创建Spring Boot项目 通过Spring Initializr创建一个新的Spring Boot应用程序，在线初始化服务允许指定所需的依赖项，对于本案例来说至少应该加入`Spring Web`来支持构建Web应用和服务端API接口[^3]。 #### 3. 设置前后端分离架构 在实际部署时通常采用前后端分离的方式，即前端(Vue.js)运行于独立的服务进程中并通过HTTP协议调用后端(Spring Boot)提供的RESTful API完成数据交换。因此需要分别设置两个项目的启动参数以确保它们能够正常通信。 #### 4. 安装Vue CLI并建立新工程 安装Vue命令行工具CLI之后可以快速生成基于Vue框架的新项目结构；进入所选目录执行相应指令即可开始创建过程。完成后记得按照提示安装任何额外推荐插件或库文件以便更好地支持后续功能扩展[^1]。 ```bash npm install -g @vue/cli vue create frontend-app cd frontend-app ``` #### 5. 启动前后端服务器 确保两部分都能单独成功编译运行后再考虑联调测试整个系统的连通性和交互效果。一般情况下可以通过各自内置的任务脚本来轻松做到这一点——比如使用Maven/Gradle构建Java代码的同时也利用NPM/Yarn管理JavaScript资源包及其生命周期事件。 ```xml <!-- Maven pom.xml --> <build> <plugins> <!-- ...其他配置... --> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.10.0</version> <configuration> <workingDirectory>${project.basedir}/src/main/frontend</workingDirectory> </configuration> <executions> <execution> <id>install node and npm</id> <goals><goal>install-node-and-npm</goal></goals> <phase>generate-resources</phase> <configuration> <nodeVersion>v16.13.0</nodeVersion> <npmVersion>8.1.0</npmVersion> </configuration> </execution> <execution> <id>yarn install</id> <goals><goal>yarn-install</goal></goals> <phase>generate-resources</phase> </execution> <execution> <id>yarn run build</id> <goals><goal>yarn-run</goal></goals> <phase>compile</phase> <configuration> <arguments>build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build> ``` ```json // package.json scripts section { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ```