spring boot + vue cli 3 整合开发(附带简单的项目实战)

本文介绍了一个使用Spring Boot和Vue CLI 3整合开发的小型项目,旨在实现一键化打包和运行。项目适用于1-2个后端开发者,使用IDEA,系统为Win10。通过Maven插件在编译时运行Vue项目,并修改Vue配置文件以优化流程。在Spring Boot中设置命令,使得开发环境运行更加便捷。
摘要由CSDN通过智能技术生成

随着webpack的流行 现在大部分项目都是前后端分离. 但总有一些小项目在初期就只有1-2个后端做开发, 而且 vue 确实很容易上手 webpack的压缩和性能优化也确实好用. 因此做了个小Demo 有朋友喜欢的话可以多多讨论.
使用IDE : idea
系统 : win10(用mac的朋友可能需要修改一部分内容)
demo: https://github.com/xiongmaowang/spring-vue

项目结构如图:
在这里插入图片描述
添加了vue 文件夹作为vue项目路径

目的

  1. 让项目打包一键化
  2. 让项目运行一键化
  3. 根据文件目录生成router

让项目打包一键化

创建 maven plugin 用于maven编译时运行 vue 项目
核心代码如下

@Mojo( name = "compile",defaultPhase = LifecyclePhase.GENERATE_RESOURCES)
public class CompileMojo extends AbstractMojo {
    @Override
    public void execute() throws MojoExecutionException {
    	//根据项目路径运行 yarn build命令
        Process run = Runtime.getRuntime().exec(new String[]{"cmd","/c",
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实战下载一个基于Spring BootVue 3的大型前后端分离项目,可以按照以下步骤进行: 1. 确保你已经安装了相关的开发环境,包括Java开发环境和Node.js环境。可以在官方网站上下载并安装最新版本的JDK和Node.js。 2. 打开终端或命令行界面,并通过npm安装Vue CLIVue Command Line Interface)。在终端中运行以下命令: ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue 3项目。在终端中运行以下命令: ``` vue create my-project ``` 根据提示选择使用Vue 3版本和一些其他配置选项。 4. 进入项目目录。在终端中运行以下命令: ``` cd my-project ``` 5. 开发前端。通过Vue CLI提供的开发服务器,在本地运行前端项目并进行开发。在终端中运行以下命令: ``` npm run serve ``` 这将启动开发服务器,并提供一个本地地址,例如:http://localhost:8080。在浏览器中打开此地址,你将看到默认生成的Vue欢迎页面。 6. 下载Spring Boot后端项目。可以在GitHub等代码托管平台上搜索和下载基于Spring Boot的后端项目模板。选择一个合适的项目,下载并解压缩。 7. 在IDE(如IntelliJ IDEA)中打开后端项目。将此项目导入你的IDE,并按照需要进行配置和修改。 8. 运行后端项目。通过IDE的运行按钮或在终端中运行以下命令启动后端项目: ``` ./mvnw spring-boot:run ``` 后端项目将启动,并监听默认端口8080。 9. 在Vue前端项目中配置跨域访问。由于前后端分离,前端将运行在不同的域上,需要配置后端允许跨域访问。在Vue项目的src目录下创建一个vue.config.js文件,并在其中添加以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', ws: true, changeOrigin: true } } } } ``` 10. 在前端项目中发起API请求。根据后端项目的API文档,在前端项目的代码中编写对后端接口的调用。可以使用Vue提供的axios等HTTP库来发送请求。 通过以上步骤,你就可以开始在本地开发一个基于Spring BootVue 3的大型前后端分离项目实战。根据实际需求,你可以进一步完善前后端的交互和功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值