芋道源码-环境搭建(二)前端

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

最近在学习基于开源代码 - 芋道源码的云平台开发,环境搭建挺麻烦的,记录一下,同时供想要学习云平台开发的兄弟们参考。

此篇为环境搭建(二)前端,如需要后端环境搭建,请移步我的另一篇文章:芋道源码-环境搭建(一)后端

开发环境:
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

在这里插入图片描述
就会自动在网页浏览器打开下图网页。
在这里插入图片描述
在这里插入图片描述


总结

前端环境搭建到这就完成了,希望兄弟们都能够按照教程搭建成功!如有错误请谅解,小白一枚,谢谢!

  • 27
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值