当前位置：首页 > news >正文

前后端分离项目环境搭建

news 2025/9/11 20:15:11

利用maven创建springboot项目

nodejs：
- 一个开源、跨平台的 JavaScript 运行时环境，可以理解成java当中需要安装的jdk；
- 官网：https://nodejs.org/en
npm
- JavaScript依赖包管理工具，全世界都可以用它来共享javascript包，负责前端项目的打包，插件下载等，可以理解成java中的maven
- 官网：https://www.npmjs.com/
vite
- 快速构建前端Vue项目的脚手架，可以理解为开发Spring Boot的Spring Initializr快速构建工具
- 官网：https://cn.vitejs.dev/

下载：https://nodejs.org/en/download
安装：解压即完成安装(.zip版本)
在安装目录下（node.exe所在的目录）创建以下俩个文件夹
- node_global （依赖库）
- node_cache （缓存）
在安装目录下cmd进入dos窗口，执行
- npm config set prefix “E:\worktool\node\node_global” 【这里的路径要改为自己的文件路径】
- npm config set cache “E:\worktool\node\node_cache” 【这里的路径要改为自己的文件路径】
可以查一下，看看有没有设置成功：
- npm config get prefix
- npm config get cache
配置环境变量
- 在path中添加 nodejs的安装路径和 node_global文件夹所在的路径。如：
  - E:\worktool\node
  - E:\worktool\node\node_global
- 在任意目录打开dos窗口进行测试：
  - node -v
  - npm -v

dos下查看目前的npm仓库源（位置）：

npm config get registry

可以更换npm的仓库源，提高下载速度

//设置淘宝源
npm config set registry https://registry.npmmirror.com/

安装一个模块（js依赖库）测试一下看看：
```
npm install axios -g  #其中-g是全局安装的意思；
```
全局安装就会把axios模块安装到前面创建的node_global目录下，如果不加-g就会安装到了当前执行命令所在的目录下：C:\Users\Administrator

vite是vue.js的脚手架，用于自动生成vue.js的项目模板（项目基础骨架）。之前比较流行的是 Vue-cli
创建vue工程
```
npm create vite@latest 
```
- npm是Node Package Manager的缩写，是Node.js的一个包管理工具。
- create是一个npm的命令，用于创建新的npm包。
- vite是一个基于Vue.js的静态网站生成器，
- @latest表示使用最新版本的vite，即npm create vite@latest为创建一个使用最新版本vite的npm包；
VUE 报错＜npm ERR! EPERM: operation not permitted, open ‘路径‘ ＞erron -4048
- 原因：我们在安装node.js的时候将 node_cache、node_global 文件夹查询配置到了其他盘下面，导致无权限访问
- 解决方案：在本地将这个文件夹赋予权限即可

右击刚才创建好的后端项目，点击open in选项，点击explorer来到该项目在磁盘中的真实路径
在此处输入cmd，通过命令 npm create vite@latest 创建前端工程
1. 输入前端项目的名称
2. 选择该项目使用的框架（这里我使用的是vue）
3. 选择该项目使用的编程语言（js）
至此，前端项目搭建完成