微信开发者工具安装和配置node.js教程

在学习微信小程序开发过程中发现无法使用npm命令安装依赖：

在参考了以下两个视频以后终于成功，所以记录一下过程，也希望能对遇到同样问题的人有帮助。

(全网最详细)Node.js下载安装和配置教程(看了必成功)_哔哩哔哩_bilibili

node.js安装与环境变量的配置_哔哩哔哩_bilibili

 （建议先大致看一遍过程再配置，避免反复开启关闭cmd和配置窗口造成不必要的时间浪费）

一、基础安装

1. 因为不确定问题出在了哪里，所以我选择了笨办法——重新安装了一个微信开发者工具。安装路径选在D盘的一个空文件夹里。（安装过程不赘述了，只需要注意修改一下安装路径，别的按照默认选择就可以）
2. 然后在nodejs官网Node.js (nodejs.org)找到一个较稳定的版本的zip包，下载完成后解压缩到微信开发者工具所在的同一文件夹中。
   点击other downloads
   在页面下方找到previous releases
   找到一个较稳定的版本，我随便选了一个v14.17.0，能用就行
    
   找到跟自己电脑匹配的zip包​​​
3. 解压缩好以后可以运行cmd，输入以下指令查看版本号（建议这一步直接使用管理员权限运行，并且执行成功后暂时不用关掉cmd直到我提示关闭cmd）

   node -v
   npm -v

   如果能正确显示版本号说明下载成功，可以继续进行接下来的配置步骤。

   

二、配置过程

1. 在文件资源管理器界面右击“此电脑”，点击“属性”，点击“高级系统设置”，然后点击“环境变量”。在系统变量中新建名为“NODE_HOME”的变量，变量值为zip包解压缩后得到的文件夹的路径。然后编辑名为“Path”的系统变量（有的电脑可能为全大写），新建一条数据“%NODE_HOME%”。

        若path变量的编辑界面如下，在变量值最后接上英文分号“;”后添加“%NODE_HOME%”。

        2.在解压缩得到的文件夹里新建两个文件夹“node_global”和“node_cache”，然后在通过管理员身份运行的cmd依次执行以下命令（双引号内的文件路径为你自己刚才新建的两个文件夹的路径），（每条命令执行完不会有信息被打印）

//命令
npm config set prefix ""

npm config set cache ""

//示例
npm config set prefix "D:\MiniproDevelop\node-v14.17.0-win-x86\node_global"

npm config set cache "D:\MiniproDevelop\node-v14.17.0-win-x86\node_cache"

 然后再次点开“高级系统设置”，将用户变量的path值修改为刚才新建的node_global文件夹的路径

        3. 接下来由于我们需要新建一个值为…\node_global\node_modules的系统变量NODE_PATH，但是node_global文件夹为空，所以要先通过管理员权限的cmd执行如下命令安装一个node的包（以vue为例）来生成我们所需的文件夹（这一步完成后一定要关掉cmd窗口）：

npm install -g vue

 安装成功后可以看到node_global文件夹内有我们所需的文件夹node_modules了，点进去可以发现里面装有vue文件夹，将node_modules的路径复制下来作为NODE_PATH的变量值，然后和NODE_HOME一样添加在系统变量Path的变量值末尾。

完成后依次点击确定关掉配置窗口。

三、检验是否配置成功

重新通过管理员身份运行cmd，然后输入如下指令进入node

node

 然后输入指令

require('vue')

 检查是否路径配置成功，若没有成功界面大致为

成功的界面大致为：

 

 要注意require('')指令的格式，符号全为英文符号，可在单引号中插入任何你想要查询是否安装成功的包名。

 四、总结

经过以上配置过程就可以在开发者工具内正常使用npm来安装所需要的各种依赖了。如果某些步骤报错的话建议将配置好的路径保存然后重新打开管理员cmd试试。本人初学，有什么说的不对的请大佬指出。