前端必会:安装node

3,285 阅读3分钟

在正文的第一句加入“我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

1. 官网下载

image.png 下载地址:(nodejs.org/en/download…)

image.png

image.png

2. 安装

安装到一个自己想要的目录下:E:\tool\node\install next 下一步

  • 开始安装 image.png

  • 安装目录,默认为C:\Program Files\nodejs\,可修改。我的改为E:\tool\node\install image.png

  • 一直next,然后install

如图:安装好的目录文件

image.png

3. 检查:

  • 要注意一定要是以管理员的身份打开不然会报错:operation not permitted, mkdir 'E:\tool\node\install\node_global' image.png

  • 然后输入node -v npm -v分别查看 node 和 npm 版本

image.png 没有问题!

此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西 。

4. 环境配置

  • 说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。\
  • 例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【E:\tool\node\install】下创建两个文件夹【node_global】及【node_cache】

如下图:

image.png

代码:
npm config set prefix "E:\tool\node\install\node_cache"\

npm config set prefix "E:\tool\node\install\node_global"

检查是否设置成功:

 npm config get prefix
 
 npm config get cache
为啥要检查呢?

后面安装的vue-cli全都在node_cache文件夹中,接着 vue -V 的时候一直提示 命令不存在,而vue执行文件只是去查找node_global中的vue文件,所以会报错

接下来:

  • 设置环境变量,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

image.png

image.png

  • 新建系统环境变量:NODE_PATH,值: E:\tool\node\install\node_modules image.png

  • 修改用户环境变量中的Path 点击编辑替换原来的 image.png

image.png

5. 最后测试:

  • 配置完后,安装个module测试下,我们就安装最常用的express模块(基于 Node.js 平台,快速、开放、极简的 Web 开发框架 ),打开cmd窗口,输入如下命令进行模块的全局安装:

npm install express -g # -g是全局安装的意思 image.png

  • 目录下也已经找到了 image.png 大功告成!!

  • 多提一句: image.png

window系统 安装vite 需要node 为 >=12 版本

Vite 需要 Node.js 版本 >= 12.0.0

image.png image.png

window 7 安装14.0.0 报错

百度的结果是note.js 13.14.0 版本是 是在win7上被支持的最后一个版本!

安装13.0.0版本

image.png please wait while the setup wizard prepares to guide you through the installation 安装向导正在准备指导您完成安装过程,请稍候 image.png 一直next() image.png

把原来的覆盖就行!!!

node 下载地址: nodejs.org/zh-cn/downl…

下载mis 版本 image.png

ps: 1.cmd查看当前node版本和node安装位置 2.安装到之前node安装的目录即可

node -v
where node

Goodbay!!!