SpringBoot后端框架整合前端Vue系统框架

本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目。

在IDEA中整合前后端框架，实现前后端分离，人不分离，方便项目开发。此外，也可使用IDEA完成SpringBoot后端框架开发，vscode完成Vue前端框架开发。

复制生成的Vue前端框架至SpringBoot后端框架文件目录中，前后端项目统一在IDEA中进行开发。

在IDEA中打开，等待生成索引：
导入完成：

配置前端vue框架快捷启动：

点击 Edit Configurations

点击 + 选择 npm:

配置如下三项：

package.json： 点击下拉框选择自动生成的.json
Command： npm
Scripts： serve

之后点击 OK，生成快捷启动项：

为了方便，可以设置启动后自动加载 vue前端界面；

打开 vue项目中的 vue.config.js
复制、粘贴替换为如下内容：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({transpileDependencies: true,devServer: {//设置主机地址host:'localhost',//设置默认端口port:8080,// 设置自动打开浏览器open:true}
});

点击绿色三角，启动vue前端项目：

自动打开浏览器显示vue前端界面内容：

vue前端系统启动成功！！！

在相同位置，选择 xxxApplication 启动 SpringBoot 后端框架：

在浏览器输入

http://localhost:8090/

显示如下内容：

SpringBoot后端框架整合前端Vue系统框架成功！！！

SpringBoot后端框架整合前端Vue系统框架相关推荐

前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
Java后端以及web前端及echarts框架词云分析
运用Java后端以及web前端及echarts框架词云分析做出数据分析统计可视化展示. 以下为我的项目展示截图: 开发环境: 集成开发环境(IDE):IntelliJ IDEA 2021 服务器:To ...
分享两款智慧物业系统源码，前后端分离，前端VUE，Uni-app框架
分享两款智慧物业管理系统源码,源码免费分享,需要源码学习参考的小伙伴可以私信我. ▶▶▶1:Java智慧物业管理系统源码(App+业主端微信小程序+物业端H5) 智慧物业介绍: 一.技术架构基于Sp ...
web前端三大主流框架_web前端三大主流框架
于前端开发工程师来说,组件化模块的框架能够帮助我们更加快速的搭建自己的网站.下面本篇文章和大家介绍一下web前端的三大主流框架:Angular.React.Vue,让大家可以对这三个框架有一定的了解, ...
python的前端框架_web前端三大主流框架之Python异步框架如何工作？
这篇文章我们从 socket 编程的例子来看看 Python 异步框架是如何工作的,需要了解下简单的 socket 编程以及 Linux 提供的 I/O 复用机制. Python 异步框架也是基于操作 ...
vue框架和uniapp框架区别,前端vue和uniapp哪个好用
uniapp和vue有什么区别? vue和uni-app的区别如下:1.uni-app可以通过打包实现一套代码多端运行,而vue不行.2.uni-app有自动的框架预载,加载页面的速度更快,vue没有 ...
python +java 用socket在局域网进行图片上传给springboot后端并进行前端访问
客户端: python 服务端: java(springboot项目) 设备是两台电脑,一台windows一台ubuntu系统客户端: import os import sys import str ...
idea工具整合前端vue，nodeJs步骤
一: 下载nodeJs并安装 http://nodejs.cn/download/ 安装npm依赖最后启动项目
Java框架springBoot企业级进销存ERP系统
大家好,很高兴和大家分享源码.不管是什么样的需求.都希望各位计算机专业的同学们有一个提高.关于源码如何获取的方式, 大家可以通过常用的搜索引擎,以百度为例,搜索源码乐园 code51 ,然后再次搜索 ...

SpringBoot后端框架整合前端Vue系统框架

SpringBoot后端框架整合前端Vue系统框架

SpringBoot后端框架整合前端Vue系统框架相关推荐

最新文章

热门文章