一次性解决nvm+nodejs+nrm+vite开发环境搭建问题

2022/7/1 14:23:22

本文主要是介绍一次性解决nvm+nodejs+nrm+vite开发环境搭建问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录
  • 1.安装NVM
  • 2.安装nodejs
  • 3.安装nrm
  • 4.安装vite
  • 结束语

前一段时间电脑硬盘坏了,重装了系统,所以这一段时间下班后一直在家搭建开发环境,期间遇到了N次报错,快把我气出了内伤。最终靠着Bing搜索终于一个个解决了,连夜写个博客方便查阅。

1.安装NVM

nvm是一个node版本管理工具,能非常方便的安装、卸载、切换node版本,防止安装的node有问题后需要手动重装(很方便)。
首先打开nvm安装程序下载页面,windows电脑点击下载下图中的nvm-setup.exe文件。
image size=0.6
下载完了之后,安装到D盘或者E盘,注意安装路径中不要出现中文或者空格。

2.安装nodejs

nvm安装好之后,它会自动注册环境变量。所以我们可以直接在命令行中使用nvm。
首先使用如下命令安装长期支持版

nvm install lts

等待数十秒钟,会自动安装成功,如下

PS C:\WINDOWS\system32> nvm install lts
Downloading node.js version 16.15.1 (64-bit)...
Extracting...
Complete


Installation complete. If you want to use this version, type

nvm use 16.15.1

安装成功后使用这个版本,否则输入命令node -v会报错,因为nvm不会自动选择版本。
使用如下命令选择使用的版本:

nvm use 16.15.1

选择使用版本的时候遇到了两种结果,成功和失败:
成功:

PS C:\WINDOWS\system32> nvm use 16.15.1
Now using node v16.15.1 (64-bit)

失败的情况报错为

exit status 145:

这种情况,需要卸载当前版本重新安装,卸载命令如下:

PS C:\WINDOWS\system32> nvm uninstall 16.15.1
Uninstalling node v16.15.1... done

卸载后再根据上面的安装命令重新安装一遍。
16.15.1这个版本的npm是有一些问题的,当输入npm -v的时候,会报警告,但是依然能打印出版本号,如下:

PS C:\WINDOWS\system32> npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0

如果比较介意这个问题,可以安装最新版nodejs解决
使用如下命令安装并使用最新版(latest)

PS C:\WINDOWS\system32> nvm install latest
Downloading node.js version 18.4.0 (64-bit)...
Extracting...
Complete


Installation complete. If you want to use this version, type

nvm use 18.4.0
PS C:\WINDOWS\system32> nvm use 18.4.0
Now using node v18.4.0 (64-bit)
PS C:\WINDOWS\system32> npm -v
8.12.1
PS C:\WINDOWS\system32> node -v
v18.4.0

可以看到最新版(latest)已经安装好了,使用npm -v时不报警告,看起来很干爽。

3.安装nrm

nrm是一个管理镜像源的工具,用起来也很方便,可以在默认地址和几个镜像源地址之间切换。其实nvm也提供了设置node和npm镜像源(地址)的命令,但是还需要手动输入地址,那还不如用npm自己的命令。当然越方便越好。
使用如下命令全局安装:

 npm install -g nrm

列出常用镜像源:

PS C:\WINDOWS\system32> nrm ls

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

使用淘宝源

PS C:\WINDOWS\system32> nrm use taobao

   Registry has been set to: https://registry.npmmirror.com/

换成淘宝源后能极大地减少npm install ***命令的报错,切换成淘宝源方便日后开发。

4.安装vite

PS E:\MyWebApp> npm install vite -g

added 14 packages in 7s

使用vite创建vue工程

PS E:\MyWebApp> npm create vite

接下来进行工程的配置

Need to install the following packages:
  create-vite@2.9.4
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vue

Scaffolding project in E:\MyWebApp\vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

结束语

至此完成了开发环境的搭建,接下来开始勤奋的编程吧!



这篇关于一次性解决nvm+nodejs+nrm+vite开发环境搭建问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程