idea如何导入vue+springboot的项目

最新推荐文章于 2025-03-26 18:00:48 发布
最新推荐文章于 2025-03-26 18:00:48 发布
阅读量5.2k 收藏 76
点赞数 23
文章标签： spring boot intellij-idea vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59227359/article/details/136866477
版权
本文详细指导如何在IntelliJIDEA中设置SpringBoot项目的Maven配置，包括创建repository仓库、修改settings.xml，以及如何为Vue.js项目安装依赖并配置运行环境。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先在你的idea中点击File>Open,选择你项目的路径，打开你的项目

注意：要打开这种带小黑点的文件夹，然后点击ok

打开之后首先要配置你项目的maven

点击File>Setting

前提：在你的maven目录下新建一个文件夹，命名为repository,作为存放后续的文件的仓库

在搜索框中输入maven，按照图中配置成你自己的maven目录，然后Apply->ok;

下面两个勾选override之后才能更改路径，这里默认你setting.xml文件以及修改完毕，具体修改可以照着网上的方式修改，把里面的jdk都换成 你自己的版本。

然后继续在搜索框中输入enc,将以下步骤都改成Utf-8,勾选对应方框，应用

然后在你项目下有一个pom.xml的文件，右键它选择最下面的添加为maven项目

然后等待一会就变成这个样子，说明添加完成

然后如果你的项目右上角是这样的，你就可以运行你的后端springboot了

如果不是，需要配置一下jdk

点小加号之后添加jdk

选择你自己jdk的路径，然后点ok即可，添加完就可以右键运行你的springboot项目

到此你的后端就能够正常运行了

下面运行vue项目

打开你的终端，输入npm -v,看看你的npm配置好了没，在输入node -v，看你的node下好了没

都ok的话就可以cd vue使用npm i 安装vue依赖

正常情况下，等待一会,等他下载完，在你的vue目录下就会自动生产一个名叫node_moudles的文件

生成之后你就可以正常启动vue项目了，点击你右上角的Edit Configurations

点击小加号，找到npm，

添加完serve之后就能运行前端项目了

Ohh868
关注
vue初学--5在idea中导入vue项目
Yannis111的博客
04-12 1421
1.首先 2.然后选择导入的项目 3.然后一直next 4.然后finish
基于vue+springboot在线考试系统 框架 idea + vscode + html + css + vue + jav
06-19
框架 idea + vscode + html + css + vue + java + springboot + mysql 角色 管理员 9999 123456 教师用户 777 123456 学生用户 111 123456 模块介绍 管理员 登陆模块 考试管理 子模块考试查询 子模块...
如何导入外部项目（springboot+Vue+mysql）保姆级傻瓜教程
chinese_kongfu的博客
06-09 2637
导入外部项目（springboot+Vue+mysql）保姆级傻瓜教程
SpringBoot整合Vue详解
06-18
本课程是Vue的快速入门课程，涉及到的课程知识点：Vue环境的快速搭建， 会使用Vue的生命周期的钩子函数； 会使用vue常见指令；会使用vue计算属性和watch监控；会编写Vue组件；掌握组件间通信,会创建Vue实例，知道Vue的常见属性 大家都知道涛哥最关心的是找工作，这段时间出去面试的时候会经常会被问及到Vue相关的知识，所以涛哥迫不及待的赶紧出了一版Vue相关的教程，有人问：我们做后台会前台干什么呀？是因为现在的公司老板都想招复合型的人才，招一个Java开发回来恨不得前后台都会，所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE，所以大家还是要赶紧学习起来，为了你不被淘汰，为了你能快速适应公司的发展速度，快速找到一份满意的工作，赶紧学起来吧。本课程是Vue的快速入门课程，涉及到的课程知识点：Vue环境的快速搭建，?会使用Vue的生命周期的钩子函数；?会使用vue常见指令；会使用vue计算属性和watch监控；会编写Vue组件；掌握组件间通信；用2小时看完，就可以快速上手公司里的项目，后期还会有实战项目上线，请大家持续关注。
IDEA中打开项目Vue+Vue基本语法
最新发布
2301_77247766的博客
03-26 974
Vue是一种流行的JavaScript框架，用于构建交互式的Web界面。它采用了简洁的模板语法和组件化的开发方式，使得开发者可以轻松地管理和维护复杂的界面结构。Vue还提供了丰富的指令和工具，帮助开发者更高效地处理数据和事件，提升用户体验。
Springboot整合Vue步骤以及遇到的问题
qq_34286744的博客
08-03 2338
【代码】Springboot整合Vue步骤以及遇到的问题。
idea中导入vue项目并运行
好幸运
03-06 1万+
一、idea打开vue项目卡死问题解决 file -> settings -> File Types -> ActionScript -> *.as -> 给下面添加node_modules; 然后 apply -> ok 二、nodejs安装 idea中导入vue项目并运行 1. 下载node.js 在搭建vue的开发环境之前，先下载node.js，下载地址：https://nodejs.org/en/https://blog.csdn.ne...
Idea实现springboot+vue项目整合
qq_46017272的博客
04-02 7325
1.首先在Idea中分别创建一个vue项目一个springboot项目（前面文章说过），右键uve项目，新创建一个子项目，New->Module 2.选择Maven->Next 3.填写项目名称，选择Finish 这样就创建好了一个springboot项目 但是由于这样的springboot项目缺少组件，pom文件中缺少很多依赖，所以最好将我们之前创建好的springboot项目导入进来 4.删除springboot项目的src和pom.xml 5.将最初创建完成
Idea如何导入一个SpringBoot项目
热门推荐
a1327524551的博客
04-01 7万+
最近公司要求开发工具要用Idea，作为一个eclipse的老员工，记录一下Idea中遇到的坑 刚开始用Idea从Git上导入一个项目时，遇到了很多坑，网上有很多方法，我不多做介绍。只说明一下我使用的方法。 1.本地新建一个文件夹，从git上导入项目到本地文件夹。（git的相关使用请自行百度，这里只讲Idea的使用方法） 2.将这个文件夹直接拖到Idea的启动图标上。 或者，从Ide...
IDEA如何导入运行SpringBoot+Vue项目
weixin_37622786的博客
12-09 3万+
vue项目导入前准备 vue项目的node_modules直接放入idea会导致idea卡死，所以放入之前要对idea做配置，使idea对node_modules不索引。 操作方法：IntelliJ IDEA ->Preferences ->Editor展开选中File Types ->在ignore files and folders里加入node_modules; ->...
idea导入VUE项目
duzishivip的博客
03-21 1488
导入 直接import project 选择你之前创建的vue项目目录 一路next即可 在idea上开发vue需要装vue的插件 1.点击file 2.选择settings 3.选择plugins 4.在marketplace中搜索vue，选择第一个安装 安装后重启idea就可以了 main.js报错 1.点击file 2.选择settings 3.选择language 4.选择JavaSc...
IDEA中导入Vue框架项目的配置过程
lsyiwxy的博客
09-16 2598
VUE框架的java项目的导入IDEA的配置
Java项目:网上电商项目(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
12-06
本系统功能包括： 一款基于Springboot+Vue的电商项目，前后端分离项目，前台后台都有，前台商品展示购买，购物车分类，订 单查询等等，后台商品管理，订单管理，信息维护，用户管理等等。本期源码免费，部分bug小辰...
Java项目:仿小米商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
02-11
本系统功能包括： 基于vue + Springboot前后端分离项目精简版仿小米商城 系统，注册登录，首页展示，商品展示，商品购买，下单支 付（支付有点小问题仅支持单个商品支付）后台维护等 等。 二、项目运行  环境配置...
Java项目:学生宿舍管理系统(java+SpringBoot+Mybaits+Vue+elementui+mysql)
06-10
项目介绍 基于Springboot + vue实现的学生宿舍管理系统 本系统包含管理员、宿管员、学生三个...1. 使用Navicat或者其它工具，在mysql中创建对应sql文件名称的数据库，并导入项目的sql文件； 2. 使用IDEA/Eclipse/MyEc
Java项目:学生管理系统(java+Springboot+Maven+mybatis+Vue+Mysql)
03-19
一、项目简述 本系统功能包括： 学生管理，教师管理，课程管理，成绩管理，系统管理等等。 二、项目运行 环境配置： ...Springboot + Maven + mybatis+ Vue 等等组成，B/S模式 + Maven管理等等。
在IDEA中对vue项目第一次导入需要的操作
weixin_46382462的博客
07-16 4466
在IDEA中对vue项目第一次导入需要的操作 在IDEA中对vue项目第一次导入需要的操作 刚开始接触Vue的小白，在第一次用IDEA导入Vue项目时遇到了一些问题，成功导入后整理了一下我个人成功操作的步骤，小白的文章仅供参考 第一步：open项目，不要用import 第二步：点击file，settings(我这里用的是中文版的，就点击文件，设置就行 第三步：进入settings（设置）之后选择plugins（插件），搜索Vue，点击install或者安装 第四步：搭建node.js环境. node.j
如何将构建好的Vue项目导入到IDEA并成功运行
m0_57545353的博客
04-27 1万+
将初始化的Vue项目导入到IDEA并成功运行和打包
idea中导入别人的vue项目并运行
czcys1234的博客
05-07 3537
1. 下载node.js 在搭建vue的开发环境之前，先下载node.js，下载地址：https://nodejs.org/en/https://blog.csdn.net/antma/article/details/86104068 2. 安装 下载好后安装，傻瓜式点下一步直到finish即可https://blog.csdn.net/antma/article/details/86104...
vue+springboot 项目构建idea
02-02
### 创建 Vue 和 Spring Boot 集成项目 #### 1. 创建 Spring Boot 项目 在 IntelliJ IDEA 中创建一个新的 Spring Boot 项目。选择 `Create New Project`，然后选择 `Spring Initializr` 并设置相关参数[^1]。 ```java @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 为了使前端和后端能够更好地通信，在 Spring Boot 应用程序中配置 CORS 支持： ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 生产环境中应指定具体域名 .allowedMethods("GET", "POST", "PUT", "DELETE"); } } ``` #### 2. 添加 Vue.js 前端支持 在同一工作空间内启动新的 Vue.js 项目。通过命令行工具安装 Vue CLI 后执行如下指令来初始化新应用： ```bash npm install -g @vue/cli vue create frontend-app cd frontend-app npm run serve ``` 也可以直接利用 IntelliJ IDEA 提供的功能简化这一步骤。进入 `File -> New -> Project...`, 接着挑选 `Static Web -> Vue.js` 来快速搭建环境并完成初始设定[^2]。 确保已正确设置了插件以便于管理依赖关系以及提供必要的编码辅助功能。如果发现无法找到对应的插件选项，则可能需要手动下载或更新至最新版本的 IDE 及其扩展组件[^4]。 #### 3. 整合前后端服务 为了让两个独立运行的服务相互协作，建议采用相对路径访问资源文件，并调整打包后的静态页面部署位置。修改 `vue.config.js` 文件中的公共路径属性以适应实际需求： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/static/' : '/' }; ``` 最后，在 Spring Boot 主应用程序类所在目录下新建名为 `resources/static/` 的子文件夹用于放置编译好的前端产物；或者考虑借助代理服务器实现跨域请求转发机制从而绕过浏览器同源策略限制。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值