前端开发node.js、vue安装环境【安装node版本管理工具-nvm，耗时一天时间踩坑总结】

前端node版本管理工具nvm安装与使用【避坑指南】耗时一天踩坑总结

水香木鱼

3012人浏览 · 2022-09-23 19:17:14

水香木鱼 · 2022-09-23 19:17:14 发布

🚀作者简介

主页：水香木鱼的博客

专栏：前端工具

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

（一）nvm 常用命令必知

nvm ls 查看已经安装的node版本
nvm install 版本号可安装指定版本的node
nvm use 版本号切换到指定版本
nvm uninstall 版本号卸载指定版本
nvm list available 查看可安装的node版本
nvm list 查看可安装的node版本
nvm -V 查看是否安装nvm

（二）nvm github官网地址【不推荐，速度较慢】

进入官方 nvm-windows官网

在这里插入图片描述

（三）nvm 博主自用存放飞书云【推荐，无需等待下载即用】

点击下载水香木鱼飞书云 nvm-node版本管理工具

（四）安装nvm版本管理工具

Ⅰ、推荐自定义路径安装【管理起来很方便】

⚠ 不建议默认安装，会出现未知的问题

在这里插入图片描述

Ⅱ、【第一个路径为`D:\Program Files\nvm` 】

在这里插入图片描述

Ⅲ、【第二个路径为`D:\Program Files\nvm\nodejs`】

在这里插入图片描述

Ⅳ、执行install

在这里插入图片描述

Ⅴ、等待安装

在这里插入图片描述

Ⅵ、点击红框选中位置

在这里插入图片描述

Ⅶ、cmd 黑窗口输入 `nvm -V` 查看是否安装成功，出现如下证明安装成功。

在这里插入图片描述

（五）配置nvm淘宝镜像源【`并解决文件夹权限问题`】

需要注意的是，到此步骤需要格外注意这里涉及到文件夹的权限问题，跟着操作步骤往下走即可。

找到nvm安装路径 D:\Program Files\nvm

在这里插入图片描述

添加如下代码：

node_mirror:http://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/

此时会出现：

在这里插入图片描述

提示：你没有权限打开该文件，请向文件所有者或管理员申请权限

在这里插入图片描述

解决方式如下操作流程；👇

Ⅰ、鼠标右键选择-属性

在这里插入图片描述

Ⅱ、勾选完全控制

在这里插入图片描述

Ⅲ、点击应用按钮

在这里插入图片描述

注意：要勾选组或用户名里的所有的权限

在这里插入图片描述

Ⅳ、出现设置安全信息，等待完成即可

在此过程中可能会出现部分提示，点击继续就行

在这里插入图片描述

Ⅴ、修改完权限以后，要继续配置nvm淘宝镜像源

再次打开settings.txt文件，添加如下：

node_mirror:http://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/

（六）使用nvm 下载node

nvm install 14.13.1

在这里插入图片描述

（七）查看电脑是否安装成功node版本

nvm list

如提示：No installations recognized. 证明没有node环境

在这里插入图片描述

（八）检验node是否安装成功

此处注意：如出现提示：不是内部或外部命令，也不是可运行的程序或批处理文件。 是因为没有nvm use 切换版本导致

在这里插入图片描述

（九）切换node版本号

nvm use 14.13.1

如遇到以下报错信息：
在这里插入图片描述

Ⅰ、可用高级管理员切换版本 win + x

在这里插入图片描述

Ⅱ、成功切换

在这里插入图片描述

Ⅲ、再次打开cmd 黑窗口进行测试 `nvm list` ,此时会看到版本号前显示星号代表切换成功

14.13.1 (Currently using 64-bit executable)

在这里插入图片描述

Ⅳ、再次执行`node -v` `npm -v`

在这里插入图片描述

Ⅴ、nvm其他命令

nvm arch ：显示node是运行在32位还是64位。
nvm install [arch] ：安装node， version是特定版本也可以是最新稳定版本latest。可选参数arch指定安装32位还是64位版本，默认是系统位数。可以添加–insecure绕过远程服务器的SSL。
nvm list [available] ：显示已安装的列表。可选参数available，显示可安装的所有版本。list可简化为ls。
nvm on ：开启node.js版本管理。
nvm off ：关闭node.js版本管理。
nvm proxy [url] ：设置下载代理。不加可选参数url，显示当前代理。将url设置为none则移除代理。
nvm node_mirror [url] ：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm npm_mirror [url] ：设置npm镜像。https://github.com/npm/cli/archive/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作。
nvm uninstall ：卸载指定版本node。
nvm use[version] [arch] ：使用指定版本node。可指定32/64位。
nvm root [path] ：设置存储不同版本node的目录。如果未设置，默认使用当前目录。
nvm version ：显示nvm版本。version可简化为v。

（十）不使用nvm版本管理【直接下载node】

往期版本 | node.js

在这里插入图片描述

（十一）vue环境

Ⅰ、安装vue

在这里插入图片描述

显示 + @vue/cli@3.12.1 added 920 packages from 570 contributors in 56.241s 证明vue脚手架安装成功

npm install -g @vue/cli@3.12.1

验证脚手架 vue -V

3.12.1

Ⅱ、卸载vue

显示removed 837 packages in 13.741s 证明vue脚手架卸载成功

npm uninstall -g @vue/cli

📓精品推荐

🔋前端如何通过vue/cli脚手架创建vue项目

🔋Vue的引入方式，属性和计数器案例

🔋史上最全的Vue生命周期钩子函数11个

🔋vue中的data为什么是一个函数？起到什么作用？

🔋vue实现换一批业务【WoodenFish完整版】

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^