如何通过IDEA导入并启动前端项目

原创 最新推荐文章于 2026-05-20 10:50:16 发布 2.8w 阅读 AI写同款
收录于
[Vue]

当前文章被收录于：

[Vue]
18 篇文章 1 人学习
订阅专栏 查看详情
我能在河边钓一整天的鱼
我能在河边钓一整天的鱼 博客等级 码龄10年 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 2.8w累计阅读 2.9w+平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要
346粉丝812篇原创
关注
IDEA实战：从零启动Spring Boot+Vue前后端分离项目全流程 在Java Web开发中，理解项目结构与环境配置是成功运行应用的基础。现代Web应用通常采用前后端分离架构，后端通过Spring Boot框架提供RESTful API，前端则使用Vue或React等框架构建用户界面。这种架构的核心价值在于关注点分离、独立开发和部署灵活性，广泛应用于企业级后台管理系统、电商平台等场景。要成功启动一个前后端分离项目，关键在于精准配置开发环境，包括JDK、Maven和Node.js的安装与镜像设置，以及在IntelliJ IDEA中正确导入项目、配置数据库连接和解决前后端联调时 阅读详情
AI摘要

本文详细介绍了解压前端压缩包、使用IDEA导入项目、安装依赖及启动项目的步骤，并附上项目结构说明，帮助开发者快速上手。

 

目录

搭建前端

1.解压前端压缩包

2.使用IDEA导如这个前端项目

3.安装依赖

4.启动项目

 项目结构说明

 

搭建前端

 

1.解压前端压缩包

解压到和后端同一个目录下

 

2.使用IDEA导如这个前端项目

效果如下

 

3.安装依赖

按alt+F12打开终端，输入npm install

 

下图显示即代表安装成功，warn并无大碍

 

4.启动项目

输入npm start启动

启动成功之后访问该网址

 

 

项目结构说明

 

标签
#vue #IDEA
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
2.4-使用idea开发javaWeb应用程序-1（前端页面） 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例 阅读详情

相关推荐

IDEA若依框架入门(前后端分离版本) 0基础详细步骤代码导入运行

(2)在User settings file 先点击“override”，然后点击“文件夹的图标”，路径选中“本地maven路径”下的“conf”——>“settings.xml”文件。选择刚才解压后存储的目录选择RuoYi-Vue-master文件（根据紫的的文件名目录进行选择），我下载的放在D:\ruoyi。(1)在“Maven home path”中找到你们安装在本地的maven的路径，我的是安装在D盘下面。（1）我上面配置的数据库名为ry-vue,在数据新建了一个ry-vue的数据库。

weixin_50320299的博客 8219

IDEA导入Web项目的三种方式

超详细IDEA导入Web项目的三种方式

qq_45344586的博客 1万+

使用 IntelliJ IDEA 运行 Java 前端

通过创建新项目、编写前端代码、运行和调试应用程序，您可以轻松地开发和测试前端应用程序。如果您希望构建前端应用程序并将其分发给其他用户，可以使用 IntelliJ IDEA 的构建工具。在编辑器窗口中，右键单击您的 Java 类文件，并选择 “Run” -> “Main”。要调试前端应用程序，您可以在编辑器窗口中设置断点，然后选择 “Debug” -> “Main” 运行调试会话。在新创建的 Java 类文件中，您可以编写任何前端代码，例如使用 Swing 或 JavaFX 创建用户界面。

IOWEL的博客 3635

idea如何导入vue+springboot的项目

下面两个勾选override之后才能更改路径，这里默认你setting.xml文件以及修改完毕，具体修改可以照着网上的方式修改，把里面的jdk都换成 你自己的版本。打开你的终端，输入npm -v,看看你的npm配置好了没，在输入node -v，看你的node下好了没。选择你自己jdk的路径，然后点ok即可，添加完就可以右键运行你的springboot项目。首先在你的idea中点击File>Open,选择你项目的路径，打开你的项目。然后如果你的项目右上角是这样的，你就可以运行你的后端springboot了。

qq_59227359的博客 6714

RuoYi项目下载及配置启动

RuoYi项目下载及配置启动

小钟不想敲代码 5672

航天仿真必看：如何用SOFA库实现高精度GCRS-ITRS坐标转换？避坑指南

本文深入解析了航天仿真中高精度GCRS-ITRS坐标转换的关键技术，重点介绍了SOFA库在天球系与轨道系转换中的权威应用。通过对比传统方法的误差来源，详细阐述了SOFA库的转换算法优势、工程实现步骤及误差控制策略，为航天器轨道仿真提供毫米级精度的解决方案。

7h6j5k4l3的博客 850

VUE——IDEA 启动前端工程VS文件启动前端工程

启动已有的vue前端项目

chenjianghhua的博客 6455

线性代数笔记【空间曲面】

二次曲面 曲面可以看成是一个动点或一条动曲线按照一定条件或规律运动产生的轨迹 曲面的方程即是该动点的坐标所满足的方程 空间解析几何中，一般会涉及到由曲面写方程和由方程看曲面两种类型问题 曲面与曲面方程 球面方程 球面：空间内与定点的距离等于定长的点的集合 这一定点叫球心，定长叫半径 标准方程 (x−x0)2+(y−y0)2+(z−z0)2=r2(x-x_0)^2+(y-y_0)^2+(z-z_0)^2=r^2(x−x0​)2+(y−y0​)2+(z−z0​)2=r2 球心P0(x0,y0,z0)P_0(

qq_40500005的博客 3245

idea怎么导入gradle的项目

idea怎么导入gradle的项目 步骤如下： 1.先用gradle将项目下载至一个文件夹 ①如图新建一个文件夹 ②在文件夹中通过svn下载项目 2.用idea打开这个下好的项目 3.找到此项目的gradle配置，进行依赖的导入 依赖导入成功之后，启动类上会出现三角，即可直接进行启动了 4.其他配置 ①启动的配置 gradle的 springboot的 5.vue前端的启动 ①常用命令 npm build npm build -i npm run serve 直接运行这个地址，即可

qq_35146059的博客 1万+

glibc手动升级高版本导致系统(RedHat/Centos)异常(无法开机等)的解决方法(回退低版本glibc)

我的系统是Redhat7.6, 理论上Redhat7/Centos7都可以使用该方法解决问题。 首先慎重提醒各位：glibc升级会产生无法预料的后果！由于Android NDK需要高版本的glibc才可以使用，所以作死手动去更新了glibc2.18，使得重启系统后图形界面消失。(Redhat/Centos升级此类安装包最好用yum升级，因为系统内的程序对他们的依赖很大，升级会导致大部分程序无法使用...

weixin_42881528的博客 9694

警惕！数字签名伪造的攻防演练：用SigThief克隆证书的真实测试（Windows环境）

本文深入探讨了Windows环境下数字签名伪造的攻防技术，详细介绍了使用SigThief工具进行签名提取与克隆的实战步骤。通过真实测试案例，揭示了数字签名安全机制的潜在漏洞，并提供了有效的防御策略和检测技术，帮助安全人员提升系统防护能力。

weixin_42530732的博客 408

idea如何部署若依项目(前后端分离)

从目前来看有很多公司是基于若依来进行二次开发的。RuoYi 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf、Bootstrap），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。

qq_52143611的博客 7471

手把手教你学Simulink--基于Simulink的高增益DC-DC变换器仿真建模

特点高电压增益：可以在不使用变压器的情况下实现较大的电压升压比。适用于低电压源：如太阳能电池板、燃料电池等提供的低压直流电源。效率问题：设计时需特别注意提高效率，减少能量损失。挑战电路复杂性：通常涉及多个电感和电容，以及复杂的开关模式。元件选择：合适的元件参数对于达到理想性能至关重要。控制策略：确保高效稳定运行的同时，适应负载变化。首先明确要模拟的任务内容。实现特定的电压增益比（例如从24V升至380V）。根据预期的输入输出电压确定合适的电路拓扑和元件值。

MHD0815的博客 172

搭建后台前端

搭建后台管理前端 导入已有资源 后台项目相对复杂 然后在Intellij idea中导入新的工程： 选中我们的工程： 安装依赖 你应该注意到，这里并没有node_modules文件夹，方便给大家下发，已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖： 我们只需要打开终端，进入项目目录，输入：npm install命令，即可安装这些依赖。 大概需要几...

Leon_Jinhai_Sun的博客 299

Python学习第32天：Web前端入门

本文介绍了Web前端开发三大核心技术：HTML、CSS和JavaScript。首先概述了HTML的发展历程和HTML5新特性，详细讲解了常用HTML标签如文本、列表、链接、图像、表格、表单等。其次介绍了CSS的基础语法、选择器、颜色字体设置、盒子模型和布局定位方法。最后简要提及JavaScript为网页添加交互功能的作用。文章为Python开发者提供了前端技术的基础知识，帮助理解网页的结构、样式和行为实现原理。

tigerhhzz的博客 1909

APM32取代STM32的经验分享

我仔细检查了代码中与硬件相关的部分，例如外设寄存器的访问和中断处理程序的设置，并进行了相应的修改。在本文中，我将分享我将APM32引入项目中取代STM32的经验，并提供相应的源代码。我查看了APM32的官方网站、开发者论坛和相关社交媒体，了解了开发者社区的活跃度和可用的资源。总结起来，将APM32替换STM32的过程需要经过几个关键步骤：了解APM32的规格和功能、评估软件生态系统、迁移代码和调试，以及性能和功耗优化。在开始替换之前，我对APM32进行了详细的研究和评估，以确保它能够满足项目的需求。

UplKubernetes的博客 2004

IDEA导入并启动若依项目步骤（SpringBoot+Vue3）

建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题。)访问，但是不会出现静态页面，可以继续参考下面步骤部署前端，然后通过前端地址来访问。在Navicat中运行下边的两个sql文件，运行后生成的表如下。，改为本地的数据库（我这里是mysql8）（这里是我用的命令，请根据实际情况更改。下载好后，用VSCode打开该项目。复制命令，将项目克隆到本地。后端运行成功可以通过(此时访问到的界面如下。

1330

vue3+element-plus - 最新详细实现将表格Table组件 “所见所得导出“ 为excel(xls/xlsx)电子表格文件，表格中的图片图像、图标等媒体资源完美导出显示（详细示例代码）

vue3，nuxt3，element plus，表格组件，Table，el-table，导出，下载，excel，电子工作簿，xls，xlsx，将表格导出成xls，如何把表格原封不动的导出成excel，保留图片，带图片，图标，如何导出包括含有图片的Excel表格，图片和表格数据导出excel，把表格导出成excel格式，表格内的图片一起导出，vue3导出图片和数据到Excel，可导出图片，导出图像到Excel，网页上的图片怎么能导出到xls表格中，显示图片url链接，图片太多导出失败，图片会超出单元格，图片不

✅ 精选推荐文章 4766

若依框架RuoYi前后端分离项目导入IDEA及运行启动

首先需要在码云上下载RuoYi-vue解压到你的工作目录 （https://gitee.com/y_project/RuoYi-Vue） 然后去nodejs官网下载nodejs 除了选择你的安装目录一直next 安装完成后，cmd中输入：node -v npm –v 输入path查看环境变量是 否配置成功 还需要一个python环境 管理员身份打开cmd 输入命...

smallxiongxu的博客 2万+

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox（带书签），MATLAB统计学习工具

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

使用idea搭建jeecg-boot项目

1.懒得下载的就随便找个文件夹使用git的拉取命令 jeecg官网 git clone https://github.com/zhangdaiscott/jeecg-boot.git 等待的过程有点长，实测一把王者是够了 其实可以先导入idea在再 idea的这里进行cmd操作。 2.拉取完之后进入前端窗口进行cmd操作，可以继续使用git也可以用cmd也可以在idea里面直接用不过都需要进入这个文件夹 安装yarn npm install -g yarn 下载依赖 yarn insta

重生之我不会写代码 4075

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料，已经经过了本人的筛选和整理，希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助！

【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤-初始化项目

🎙告诉你：Java是世界上最美好的语言

潜意识Java的博客 1万+

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

jeecg能在linux运行吗,jeecg-boot怎么导入到本地运行？

k最近有网友朋友在凯哥公众留言说让写个教程。这里凯哥就写个怎么在本地运行起来的。本文主要分一下几个部分，篇幅或许过长，耐心照着做下来，就可以本地运行了。一：从git中检出代码二：前端VUE运行三：idea导入项目一：从git将代码clone到本地1.1：复制地址1.2：在本地创建文件夹，鼠标右键，使用Git Bash Here使用命令：git clone +刚才复制的地址。具体如下：gitclo...

weixin_39640911的博客 223

Windows系统下，导入运行 RuoYi-Vue3 项目

基于SpringBoot+Vue3前后端分离的Java快速开发框架。

可乐很好喝 1327

litemall项目本地部署启动

从这里下载litemall项目 导入idea中，选择litemall-all下得到Application右键点击Run 'Applicatuon(2)' 在浏览器输入 http://localhost:8080/wx/index/index 启动成功 到这里后端已经启动成功，接下来启动前端，进入litemall/litemall-admin输入npm install 安装完了之后再输入npm run dev 到此项目启动成功 然后就是小程序环节啦，到这里注...

weixin_43857520的博客 4145
上一篇： 使用springcloud启动服务时报错 Reason: Unable to set value for property driver-class-name
下一篇： Kubernetes的基础概念
点赞 24
评论 3
书签 书签 92
我能在河边钓一整天的鱼
我能在河边钓一整天的鱼
博客等级 码龄10年 346粉丝 812原创
+ 关注 专栏目录 订阅专栏
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值