新手 Vue 项目运行

ops/2024/11/14 19:37:16/
htmledit_views">

前言:前面讲了我们已经将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 = falsevar 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 至此,html" title=前端>前端Vue程序已经运行起来,结合前面的spingboot项目,我们已经将整个springboot + Vue项目运行起来了。


http://www.ppmy.cn/ops/132915.html

相关文章

Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers

在使用uni-appvuu3piniapinia-plugin-persistedstate开发中, 使用pinia-plugin-persistedstate 一直在报错,其实代码也是比较简单的, import { createPinia } from pinia // 创建 pinia 实例 const pinia createPinia(); import piniaPlugi…

将vscode的终端改为cygwin terminal

现在终端是默认的power shell,没有显示cygwin 接下来选择默认配置文件 找到cygwin的选项即可 然后提示可能不安全什么的,点是,就有了

Java Lambda表达式

Java Lambda 表达式是从 Java 8 开始引入的一个重要特性,它们简化了函数式编程,并且显著减少了代码长度和复杂度。本文将详细介绍 Java Lambda 表达式的概念、语法、用途以及最佳实践。 什么是 Java Lambda 表达式? Java Lambda 表达式是一…

spark的学习-05

SparkSql 结构化数据与非结构化数据 结构化数据就类似于excel表中的数据(统计的都是结构化的数据)一般都使用sparkSql处理结构化的数据 结构化的文件:JSON、CSV【以逗号分隔】、TSV【以制表符分隔】、parquet、orc 结构化的表:…

STM32解锁

1.flash 全为0或者无法读取 PDR AA设置为BB -> 应用 1.PROT_AREA_START1 值设置为0xff 2.DMEP1取消勾选 1.PROT_AREA_START2 值设置为0xff 2.DMEP2取消勾选 PDR BB设置为AA -> 应用 完成解锁

vue项目删除无用的依赖

1.安装依赖检查工具 npm i depcheck2.查看无用的依赖 depcheck3.手动删除pageage.json中的无用的依赖(如果有sass和sass-loader不要删,会引起项目报错) npm uninstall 4.全部删除完成之后,删除package-lock.json文件&#xff0…

世优科技携手人民中科打造AI数字人智能体助力智慧校园

近日,世优科技与人民中科携手,为中国劳动关系学院开发了一款AI数字人助手,不仅在校园内部承担日常问询、交互工作,还在学校的展厅中担任讲解员的角色,为师生们提供生动详尽的导览服务。 中国劳动关系学院作为中华全国总…

uniapp的基本使用(easycom规范和条件编译)和uview组件的安装和使用

文章目录 1、uniapp1.uview组件安装2.uview-plus组件安装 2、条件编译3、easycom规范1.组件路径符合规范2.自定义easycom配置的示例 总结 1、uniapp UniApp的UI组件库,如TMUI、uViewUI、FirstUI、TuniaoUI、ThorUI等,这些组件库适用于Vue3和TypeScript&…