前一段时间电脑硬盘坏了,重装了系统,所以这一段时间下班后一直在家搭建开发环境,期间遇到了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
结束语
至此完成了开发环境的搭建,接下来开始勤奋的编程吧!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。