【前后端分离】如何快速运行一个Spring Boot+Vue的前后端分离项目（保姆级图文教程））

😎 作者介绍：我是程序员洲洲，一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。
🤓 同时欢迎大家关注其他专栏，我将分享Web前后端开发、人工智能、机器学习、深度学习从0到1系列文章。
🌼 同时洲洲已经建立了程序员技术交流群，如果您感兴趣，可以私信我加入社群，可以直接vx联系（文末有名片）v：bdizztt
🖥 随时欢迎您跟我沟通，一起交流，一起成长、进步！点此也可获得联系方式~

一、环境准备

后端环境：Java、JDK、MySQL、Navicat、Idea
前端环境：Node.js、VS Code

软件不唯一，大家自行准备即可，但是必要的环境是需要的，比如jdk和nodejs等。

二、后端Spring Boot运行

这里选择我们需要运行的Spring Boot项目，找到项目的地址即可。

打开pom.xml文件。

首先核对一下pom文件中的java对应版本是什么。

下一步我们配置项目运行环境，点击File，然后选择Project Structure。

然后进一步选择 “Project”，然后找到SDK，选择1.8的jdk环境，点击“OK”；

选择语言版本配置，选择软件头部的“File”，然后选择“Settings”。

选择“Build Execution Deployment”，然后选择“Compiler”，选择“Java Compiler”，其中“Project bytercode version”选择“Same as language level”或者是根据语言版本选择“8”（1.8就是8），可以看到Module下的文件目录下的版本与语言版本一致1.8，如果不是就手动选择；点击“Apply”，“OK”。

然后查看对应的Mysql版本。

如果有依赖下面有爆红的问题，我们点击Maven进行刷新，如果还是有问题，可以试着把Idea关了，重新打开即可。

接着我们打开Navicat，输入mysql账号密码即可连接。

新建一个数据库，然后右键点击这个绿色的行，然后选择运行SQL文件。

然后打开对应的SQL文件即可。

这样就运行成功了。

然后再IDEA软件中找到配置文件，设置好自己的数据库用户名和密码，还有对应的数据库名称，方框中“nideshujukumingchen”就是刚刚导入sql文件的那个数据库名称，一定要对应上。

下一步找到运行的文件。

三、前端Vue项目运行

在VScode中导入项目，然后运行终端。

然后运行命令：npm install。

等待提示安装好之后，就可以开始运行命令：npm run serve了。

npm run serve

然后就可以运行项目了。

复制这个local地址到浏览器地址，即可。

总结

📝Hello，各位看官老爷们好，我已经建立了CSDN技术交流群，如果你很感兴趣，可以私信我加入我的社群。

📝社群中不定时会有很多活动，例如每周都会包邮免费送一些技术书籍及精美礼品、学习资料分享、大厂面经分享、技术讨论谈等等。

📝社群方向很多，相关领域有Web全栈（前后端）、人工智能、机器学习、自媒体副业交流、前沿科技文章分享、论文精读等等。

📝不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个大佬！

📝想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您点击下方的链接直接加入到我的交流社群！~ 跳转链接社区~