新手 Vue 项目运行

news2024/12/23 19:20:10

前言:前面讲了我们已经将spingboot项目运行起来了,现在我们只需将后台管理的Vue项目运行起来即可完成整个项目。

在运行vue项目之前,请先运行springboot项目,运行步骤请看:运行Springboot + Vue 项目_springboot+vue项目怎么跑起来-CSDN博客

一、环境准备

在运行项目之前,确保运行vue项目的环境已经安装成功,并可以找到;

打开cmd命令行,按住win+R,出来命令行窗口,输入cmd,出来终端窗口

在终端中输入:node -v   ,得到nodejs的版本为13.14.0,如果高于这个版本可能会出现问题,请降低版本,如果有多个nodejs环境,可以安装node环境管理,nvm工具,请访问:使用nvm管理node多版本(安装、卸载nvm,配置环境变量) - 与f - 博客园

安装npm工具,输入下列语句:npm -v    ,出来版本号即安装成功;

二、Vue项目运行

2.1 回到Idea后端的springboot项目,找到src--> rescources --> front.front --> js --> config.js文件,打开之后找到 adminurl ,将adminurl修改为后台的运行路径:localhost://8081

var adminurl =  "http://localhost:8081";

var cartFlag = false

var chatFlag = false


// 将其中的adminurl修改为后台访问地址
adminurl='http://localhost:8081'

 

在src --> main --> java --> com --> SpringbootSchemaApplication.java,双击这个文件,点击编辑器头部运行程序,如图所示;

 见到8080端口,表示后端springboot已经运行起来;接下去就是运行vue项目。

 

2.1 打开VSCode软件,导入vue项目文件夹

导入项目文件,目录如下:

2.2 打开终端命令行,以命令行的形式运行项目;在终端输入:

在终端中输入npm install ,下载vue依赖包

npm install

2.3 等待npm install 下载完成,看到  “added 49 packages from 9 contributors, removed 163 packages and updated 1386 packages in 340.918s” ,表示添加成功;

2.4 在终端中输入npm run serve,等待程序运行起来。

npm run serve

2.5 在浏览器中输入访问地址:http://localhost:8081,即可访问到平台;

2.6 至此,前端Vue程序已经运行起来,结合前面的spingboot项目,我们已经将整个springboot + Vue项目运行起来了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2238520.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AUTOSAR_EXP_ARAComAPI的7章笔记(2)

☞返回总目录 相关总结:服务发现实现策略总结 7.2 服务发现的实现策略 如前面章节所述,ara::com 期望产品供应商实现服务发现的功能。服务发现功能基本上是在 API 级别通过 FindService、OfferService 和 StopOfferService 方法定义的,协议…

计算机网络分析题

网络的布置 根据具体需求布置网络 第二小题、网络的划分 根据路由表作出路由器拓扑图 ARP跨网络寻址 TCP报文段格式概念 网桥的转发表与动作 网络嗅探报文 十六进制化作十进制 嗅探以太网帧首部 除MAC帧以外,其他各层协议数据单元都是源地址在前,目…

【初阶数据结构与算法】线性表之链表的分类以及双链表的定义与实现

文章目录 一、链表的分类二、双链表的实现1.双链表结构的定义2.双链表的初始化和销毁初始化函数1初始化函数2销毁函数 3.双链表的打印以及节点的申请打印函数节点的申请 4.双链表的头插和尾插头插函数尾插函数 5.双链表的查找和判空查找函数判空函数 6.双链表的头删和尾删头删函…

【AI写作宝-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

【HarmonyNext】显示提示文字的方法

【HarmonyNext】显示提示文字的方法 本文介绍在 HarmonyNext 中显示提示文字的两种常见方法:使用自定义弹窗 CustomDialog 和使用 promptAction 的 showToast 方法。 一、使用自定义弹窗 CustomDialog 在 HarmonyNext 中,自定义弹窗是实现复杂提示信…

【3D Slicer】的小白入门使用指南

一、3D Slicer认识 3D Slicer是一个开源医学影像分析和可视化平台(本质是TotalSegmentator的软件版)。(补充:TotalSegmentator 是一个用于医学图像分割的开源工具,能够对104种解剖结构进行精确分割。该项目基于深度学习技术,支持CT和MR图像的处理。TotalSegmentator 提供…

ts定义接口返回写法

接口&#xff08;未进行ts定义&#xff09; export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any }, ) {return request<API1.UserList>(http://geek.itheima.net/v1_0/mp/artic…

.NET Core 应用程序如何在 Linux 中创建 Systemd 服务 ?

.NET Core 和 Linux 已经成为一个强大的组合&#xff0c;为开发人员提供了一个灵活、高性能的平台来构建和运行应用程序。在 Linux 上部署 .NET Core 应用程序的一个关键方面是利用 systemd 服务来确保应用程序顺利运行&#xff0c;在开机时自动启动&#xff0c;并在失败后重新…

低代码平台总览

低代码平台&#xff08;Low-Code Platform&#xff09;是一种软件开发工具&#xff0c;它允许用户通过图形化界面和少量的编码来快速构建应用程序。低代码平台的核心理念是通过抽象和最小化手工编码的方式&#xff0c;加速软件开发和部署的过程。以下是低代码平台的一些关键特性…

分布式----Ceph部署(上)

目录 一、存储基础 1.1 单机存储设备 1.2 单机存储的问题 1.3 商业存储解决方案 1.4 分布式存储&#xff08;软件定义的存储 SDS&#xff09; 1.5 分布式存储的类型 二、Ceph 简介 三、Ceph 优势 四、Ceph 架构 五、Ceph 核心组件 #Pool中数据保存方式支持两种类型&…

华为诺亚方舟新作:GUI Agent综述

1、摘要 智能代理可以做更复杂的任务。特别是模拟人类在GUI上进行交互&#xff0c;比如点击和打字。 本论文对此进行总结&#xff0c;特别是其中最关键的数据、框架和应用。 首先是数据集和基准。 其次是统一框架&#xff0c;涵盖了关键组件和分类体系。 此外是基于MLLM的GUI…

(65)使用RLS自适应滤波器进行信道均衡的MATLAB仿真

文章目录 前言一、仿真说明二、码间串扰、色散、与频率选择性衰落1. 码间串扰&#xff08;ISI&#xff09;2. 信道的色散与码间串扰3. 减少ISI的方法 三、MATLAB仿真代码四、仿真结果1.发送16QAM信号的星座图2.信道的频率响应3.接收16QAM信号的星座图4.均衡后16QAM信号的星座图…

数据结构与算法:双指针之“最长连续不重复子序列” +位运算之“求二进制中第k个数字”、“求二进制表示”、“二进制中1的个数” +整数离散化

双指针&#xff1a; 简介 常见问题分类&#xff1a; 对于一个序列&#xff0c;用两个指针维护某一段特定的区间 对于两个序列&#xff0c;维护某种次序&#xff08;譬如归并排序中合并两个有序序列的操作&#xff09; 双指针算法的最核心点在于&#xff0c;将O(N^2)的暴力…

东方通TongWeb替换Tomcat的踩坑记录

一、背景 由于信创需要&#xff0c;原来项目的用到的一些中间件、软件都要逐步替换为国产品牌&#xff0c;决定先从web容器入手&#xff0c;将Tomcat替换掉。在网上搜了一些资料&#xff0c;结合项目当前情况&#xff0c;考虑在金蝶AAS和东方通TongWeb里面选择&#xff0c;后又…

kafka 的一些问题,夺命15连问后续

16、kafka是如何做到高效读写 因为kafka本身就是分布式集群&#xff0c;可以采用分区技术&#xff0c;并行度高 读取数据可以采用稀疏索引&#xff0c;可以快速定位要消费的数据&#xff08;mysql中索引多了以后&#xff0c;写入速度就慢了&#xff09; 可以顺序写磁盘&#…

使用 Node.js 了解 MVC 模式

模型-视图-控制器 &#xff08;MVC&#xff09; 模式是 Web 开发中最流行的架构模式之一。通过将应用程序划分为三个相互关联的组件&#xff08;模型、视图和控制器&#xff09;&#xff0c;MVC 促进了有组织、可维护和可扩展的代码。Node.js 具有异步处理和庞大的生态系统&…

flink 同步oracle11g数据表到pg库

1. 关闭防火墙和selinux systemctl stop firewalld systemctl disable firewalld systemctl status firewalldvi /etc/selinux/config 修改为disabled2.安装java8 yum list java-1.8* yum install java-1.8.0-openjdk* -yjava -version3.下载和部署postgresql 看需求安装pg库…

catchadmin-webman 宝塔 部署

1&#xff1a;宝塔的php 中删除禁用函数 putenv 问题&#xff1a; 按照文档部署的时候linux&#xff08;php&#xff09; vue (本地) 无法访问后端api/login 的接口 。 解决办法&#xff1a; webman 没有配置nginx 反向代理 配置就能正常访问了

【go从零单排】接口(interface)和多态(Polymorphism)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在Go语言中&#xff0c;interface 是一种重要的类型&#xff0c;用于定义一组方法…

第3章-需求 3.1需求的概念

产品开发的需求阶段是指立项完成之后&#xff0c;根据立项计划书的任务内容&#xff0c;对任务进行目标分解&#xff0c;形成需求文档&#xff0c;确认项目需求分解到相关责任人或部门。在需求阶段&#xff0c;需要一名具备专业技能和项目经验的工程师来把控整体需求和需求细节…