新手 Vue 项目运行

**前言:**前面讲了我们已经将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

bash 复制代码
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依赖包

bash 复制代码
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,等待程序运行起来。

bash 复制代码
npm run serve

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

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

相关推荐
小白64021 分钟前
需要掌握的前端安全概念以及实操
前端·安全
ConardLi5 分钟前
要给大家泼盆冷水了,使用 MCP 绝对不容忽视的一个问题!
前端·人工智能·后端
一袋米扛几楼981 小时前
【前端】从零开始的搭建顺序指南(技术栈:Node.js + Express + MongoDB + React)book-management
前端·node.js·express
学习机器不会机器学习1 小时前
深入浅出JavaScript常见设计模式:从原理到实战(2)
开发语言·javascript·设计模式
yzhSWJ1 小时前
CSS Position 属性完全指南
前端·css
富能量爆棚1 小时前
如何搭建spark yarn 模式的集群
大数据·javascript·spark
xcLeigh1 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
非凡网站2 小时前
企业网站html源代码 企业网站管理源码模板
前端·html
brzhang2 小时前
接口又乱又难用?老司机带你掌握 8 个 API 设计绝招,告别低效协作!
前端·后端·架构
brzhang2 小时前
搞懂 HTTP/1、HTTP/2、HTTP/3:让你的 Web 应用快如闪电,面试不再怕!
前端·后端·架构