idea社区版运行springcloud

转载

mob64ca13fc220d 2024-11-01 08:52:20

文章标签 idea react node.js 缓存环境配置 文章分类 架构后端开发

领导给了我之前的项目让我看看，前端开发用的是react框架，对于我这没接触过框架的确实有点吃力，但还是得先把准备工作就绪——在intelliJ IDEA中搭建react。

查找了搭建的教程，方式不唯一，但过程照样遇到了一些问题，又重新查问题重新解决。以下是我自己结合了自身实际开发情况以及综合了好几篇教程后成功运行的react的步骤。

（今年7月毕业的本科生，计科专业，女，9.1入职，前端开发，以后就在这里记录一些学习总结了，比手动记笔记快得多😂）

1-首先，你得有IDEA

2-直接建项目吧，让IDEA能帮你在线下载的依赖全交给它来干

File-->new-->project-->JavaScript:React-->next-->命名、路径都自定义,其他项都先不改-->Finish

交给IDEA下载需要的依赖

idea社区版运行springcloud_node.js

然后会报错（报错忘记截图了😓），反正意思就是没找到node.js

3-官网下载node.js 指路node官网

用的公司电脑，内存不吃紧，下载在默认的C盘里就行

为了防止原作者改动或删除文章我还是自己照着步骤写过来吧

往自己电脑上下载都不太愿意占C盘空间，就自定义路径，如果需要看自定义路径的配环境教程可以参考☞这个

3.1 -->Next

3.2 -->I accept... -->Next

3.3 默认是C盘 -->Next

3.4 四项全部安装 -->Next

idea社区版运行springcloud_缓存_02

3.5 这里不用打勾 -->Next

idea社区版运行springcloud_idea_03

3.6 Install

3.7 Finish

4-打开cmd，输入命令：

node -v:显示安装的node.js版本
npm -v：显示安装的npm版本

idea社区版运行springcloud_node.js_04

5-修改全局模块路径和缓存路径（改不改都可以，反正我按着原作者的步骤改了，我也不知道起什么作用😓如果我的笔记有幸被各位大神们读到麻烦各位指点我一下😅）

cmd中执行命令：npm install express -g
-g表示global，全局的意思，默认下载到C盘（我这儿就不改路径了，我自己的电脑上需要下载的时候我再改路径）
它的默认路径为：[C:\Users\用户名\AppData\Roaming\npm]
（AppData及其下层文件夹是隐藏的，要在文件管理窗口上栏勾选“显示隐藏项目”选项）

idea社区版运行springcloud_idea_05

在node.js（在program File文件夹下）下创建两个文件夹：
node_global全局模块>下再建一个node_modules用来配置环境变量
node_cache用来放缓存

(啊这...我建的时候好像建错了，，把3个文件夹建成平行的了。。但好像不影响，只要在后面配置环境变量时选对node_modules的路径就行)

idea社区版运行springcloud_node.js_06

还没完，到这布才更改全局和缓存的路径，有2种方法：
【第一种】（我用的这种）
cmd中输入以下两条指令：

npm config set prefix "<node_global的路径>"
npm config set prefix "<node_cache的路径>"

如：我的是

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

【第二种】（原作者还提供了第二种）
在nodejs的安装目录下，进入node_modules——>npm——>找到npmrc文件，打开

添加以下命令：
prefix=创建的node_global文件夹所在路径
cache=创建的node_cache文件夹所在路径
如：
prefix=E:\develop\nodejs\node_global
cache=E:\develop\nodejs\node_cache

6-配置环境变量

右键此电脑-->高级系统设置-->环境变量
在系统变量中，新建，变量名：NODE_PATH
变量值：node_global文件夹下的node_modules文件夹。
如：E:\develop\nodejs\node_global\node_modules
修改用户变量中的Path变量，将默认的npm路径修改为新建的node_global路径

7-继续在IDEA中搭建react，到时候遇到问题再解决呗

（以下步骤参考文章：IDEA开发React环境配置 - 一剑天门 - 博客园 (cnblogs.com)）

7.1 判断是否有node？有！

7.2 安装npm镜像（为啥要这步呢？刚才不都已经安装了npm了吗。。求懂的程序猿哥哥姐姐们指点啊啊啊啊）

npm镜像是国外的，除非FQ，不过🍑宝也提供了npm镜像，就能满足我们的需求。

cmd中执行命令：

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

等待安装.........

BUT.....有错了。。

idea社区版运行springcloud_node.js_07

ERR（code EPERM），说是权限问题或者缓存问题，参考文章：npm ERR! code: 'EPERM' (权限问题 errro permit) - 前端开发交流 - 博客园 (cnblogs.com)

之前NPM 安装一直报这个，以为还真是权限不够，感觉有点奇怪，用管理员权限执行，没用，不过后面查了下，以为是缓存的问题，清理下缓存就行，不用管理员权限。但没用（如下）
【方法1】
需要删除npmrc文件。
强调：不是nodejs安装目录npm模块下的那个npmrc文件
而是在C:\Users\{账户}\下的.npmrc文件..
【方法2】
或者直接用命令清理就行，控制台输入：
npm cache clean --force

虽然原作者提供了两种方法，但我用第二种方法试了好像不行。。就还是用第一种简单粗暴的方法直接删吧。。

然后重新执行以上命令从🍑宝上下载npm镜像：

idea社区版运行springcloud_缓存_08