一次性解决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
文件。
下载完了之后,安装到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开发环境搭建问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程