Vue+Springboot项目，记录一次跑通别人的代码

谁借莪１个温暖的怀抱￠ 2024-03-23 19:08 18阅读 0赞

周末，闲来无事，跑了一个vue+Springboot项目，github上down了一个。我发现是个前后端分离的项目。前端vue，后端Springboot。本人没学过vue，全是上网搜。

## 跑vue项目需要： ##

### 1.安装node.js ###

我是windows10系统，使用  **msi 版本**进行安装

下载地址：[Index of /download/release/v16.18.0/][Index of _download_release_v16.18.0]

安装后，打开cmd验证node和npm是否正常，命令：（1）**node -v** （2）**npm -v**

**正常的话，会显示对应的版本号。**

**此外，**npm使用的公网服务器，服务器在国外，一般速度不快，下载经常中断，使用阿里的镜像会快很多，相对稳定。安装也很方便，执行一条命令就行。

npm install -g cnpm -registry=https://registry.npm.taobao.org

验证cnpm的版本：

cnpm -v

cnpm和npm使用方式一样，只是多了个c，但是速度更快。

### 2.安装vue-cli脚手架 ###

在命令行中运行命令

cnpm install -g vue-cli

，然后等待安装完成。

### 3.**删除package-lock.json和node\_modules 文件** ###

package-lock.json记录了整个node\_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。

![e1e4cc829f5e4f83bb58048a249690fa.png][]

然后进入vue项目路径

![1bc6c8ac1178472fa219f9fa0e1dbc07.png][]

![81ab3e033f774909aa445cc23e8928be.png][]

### **4.清除npm缓存** ###

npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。控制台输入下面命令清除npm缓存，npm有缓存时，常常出现安装依赖不成功的现象

cnpm cache clean -force

### **5.重新安装依赖** ###

cnpm install

最后运行项目：

cnpm run serve

可能最后一步会出现缺少某些依赖，可以单独执行命令 **cnpm install \[依赖名称\] --save**

运行成功如下：

![f879660a69254722bdcec97667ae5a7d.png][]

## 跑Springboot项目： ##

idea打开项目，本地新建数据库，注意数据库名称要一致，后端没遇到啥报错，一切都很正常，但是遇到数据库连接不成功，我以为是mysql数据库用户和密码没设置对，检查一下，都对，磨了一个半小时，发现：

![cb3246b87f6e4977865fa65fb656e258.png][]

红框后面有一个很长的空格，解决后，一切跑通！

![aa15afae7bb34714875ef48c7fb1e811.png][]

这项目虽简单，但是做的挺好，改改就是个大作业或毕设。

[Index of _download_release_v16.18.0]: https://nodejs.org/download/release/v16.18.0/
[e1e4cc829f5e4f83bb58048a249690fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f1a642836c954168a61707328c4336f6.png
[1bc6c8ac1178472fa219f9fa0e1dbc07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/798be146420047eb8563b8782e3f3851.png
[81ab3e033f774909aa445cc23e8928be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bbb36dfed10147c9ab7ba4e401b1a3c8.png
[f879660a69254722bdcec97667ae5a7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/531fa4454ea644b8ac430bd452a52296.png
[cb3246b87f6e4977865fa65fb656e258.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6fa6f19b0b8840a9921a50e304d7fa10.png
[aa15afae7bb34714875ef48c7fb1e811.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3d409c7dc92546dcbbf8369b03199d0f.png