提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言一、nodejs搭建1.nodejs安装2.添加环境变量 二、pnpm搭建1.npm搭建2.pnpm搭建3.使用IDEA打开项目 总结
前言
最近在学习基于开源代码 - 芋道源码的云平台开发，环境搭建挺麻烦的，记录一下，同时供想要学习云平台开发的兄弟们参考。
此篇为环境搭建（二）前端，如需要后端环境搭建，请移步我的另一篇文章：芋道源码-环境搭建（一）后端
开发环境：
IDE：IntellJ IDEA
后端
jdk 21
maven 3.9.8
前端
nodejs > 16.20.2
pnpm > 8.6.0
数据库：
MySQL 8.4.1
Redis 5.0.14.1
环境所有的资源链接：
如果已经有环境，直接去gitee克隆大佬的源码即可。
后端源码链接：
https://gitee.com/zhijiantianya/ruoyi-vue-pro
前端源码链接：
https://gitee.com/yudaocode/yudao-ui-admin-vue3
如果和我一样是小白，需要进行云平台开发环境搭建，请去下面的资源链接中获取所有文件（上述环境安装文件、芋道源码源码文件、芋道源码教程PDF）
资源链接：
网盘链接：https://pan.baidu.com/s/1dbmqpvaMSCInaS-xDH-ecA?pwd=v45z
提取码：v45z
一、nodejs搭建
1.nodejs安装
将网盘文件中的“java.zip”解压，双击“node-v16.20.2-x64.msi”安装，点击Next，勾选使用许可协议，点击Next，更改安装位置，同样建议安装D盘，继续点击Next，点击Next，点击Install，点击Finish完成安装。
2.添加环境变量
2.1 Win+R或者搜索栏进入cmd，输入：node -v，如出现下图即为成功安装。
2.2 如果没有反应，在搜索栏输入env进入编辑系统环境变量，在【系统变量】下的变量【Path】添加你刚刚安装nodejs的路径，然后cmd再次输入：node -v，如出现上图即为成功。
二、pnpm搭建
1.npm搭建
1.1 Win+R或者搜索栏进入cmd，输入：npm -v，如出现下图即为成功安装。
npm是 nodejs 下的包管理器。如果nodejs安装完成，则npm是其自带的，一般会有。
1.2 查看npm默认存放位置
在cmd下使用npm get prefix可以查看npm全局模块路径
在cmd下使用npm get cache可以查看npm默认缓存路径
如上两张图可以看到默认安装的npm全局模块和默认缓存路径处于C盘，建议进行修改，放在安装nodejs的位置。
1.3 切换npm默认存放位置
在 nodejs 安装目录下，创建 “node_global” 和 “node_cache” 两个文件夹。
使用下面的指令设置全局模块的路径为 nodejs 的安装目录下的 “node_global” 文件夹。
npm config set prefix "D:\Program Files\nodejs\node_global"使用下面的指令设置默认缓存的路径为 nodejs 的安装目录下的 “node_cache” 文件夹。
npm config set cache "D:\Program Files\nodejs\node_cache"如下图所示。
1.4 全局模块 Path 路径设置
由于 nodejs 全局模块大多数都是可以直接通过命令行访问的，所以建议在【系统变量】下的变量【Path】添加你刚刚设置 nodejs 全局模块的路径。
1.5 切换npm安装镜像
切换npm安装镜像为 淘宝 NPM 镜像
npm config set registry https://registry.npmmirror.com
1.6 测试安装全局模块
以管理员身份运行打开cmd。
在cmd-管理员权限下输入以下指令。
npm install express -global
我们就可以看见在刚刚新建的“node_global” 文件夹下多出一个express文件，此时express模块已经成功安装。
2.pnpm搭建
2.1 安装pnpm
使用npm安装pnpm，在cmd-管理员权限下输入以下指令。
npm install -g pnpm@8.6.0
2.2 安装vue
使用npm安装vue，在cmd-管理员权限下输入以下指令。
npm install vue -g
2.3 安装vite
使用npm安装vite，在cmd-管理员权限下输入以下指令。
npm install -g create-vite
npm install -g vite
3.使用IDEA打开项目
3.1 启动后端项目，先打开redis
3.2 启动后端项目，运行IDEA
3.3 运行前端项目
IDEA打开新窗口，点击左下角的终端，或者cmd切换到前端根目录文件夹，输入以下指令。
pnpm run dev
就会自动在网页浏览器打开下图网页。
总结
前端环境搭建到这就完成了，希望兄弟们都能够按照教程搭建成功！如有错误请谅解，小白一枚，谢谢！