SpringBoot+vue项目实战（一）

最新推荐文章于 2025-06-23 21:19:17 发布

原创

最新推荐文章于 2025-06-23 21:19:17 发布 · 9.2k 阅读

140 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring boot #npm #mysql #后端

本文是关于SpringBoot+Vue项目开发的实战指南，详细介绍了从环境配置到项目创建、Vue组件开发、SpringBoot后端接口搭建以及Vue与SpringBoot交互的全过程。包括Vue的安装、全局vue-cli配置、SpringBoot项目创建、数据库交互和跨域配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringBoot+vue入门

SpringBoot+Vue项目实战

SpringBoot+Vue项目实战

一：vue开发

步骤一：安装node.js

Node.js 官方网站下载：https://nodejs.org/en/
2.选择操作系统对应的包
在这里插入图片描述
下载完成，安装包如下：

傻瓜式安装，直接下一步即可
安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：
在这里插入图片描述
3.配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：
在这里插入图片描述
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix “D: ode ode_cache”

npm config set cache “D: ode ode_cache”
（prefix和cache后跟的是你node_global和node_cache这两个新建的目录，）
执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”，值为“D: ode ode_modules”，如图
在这里插入图片描述