文章目录
- 一、背景说明
- 二、现有npm情况
- 2.1、nodejs版本的查看
- 2.2、npm版本的查看
- 2.3、npm的镜像地址
- 2.4、npm全局安装时文件的存放
- 三、配置的调整
- 3.1、npm镜像的调整
- 3.2、npm本地仓库的迁移
- 3.3、npm缓存的迁移
- 3.4、安装vue
- 3.5、再次安装quasar
- 四、问题
- 4.1、.npmrc文件是什么？
- 4.2、如何卸载已经安装的vue cli？
- 4.3、常见的npm镜像有哪些？
- 五、小结
一、背景说明
最近想使用Vue做一些小的功能，但是之前只使用过Vue2。听说Vue3和Vue2的区别还是比较大的，并且Vue2后续将不再维护，所以就想着尝试使用Vue3搭建应用。在此之前需要对原来的npm进行一些调整，以方便Vue的安装。
二、现有npm情况
因为本机之前安装过nodejs，但已经是很久之前的事情了，所以需要对环境再进行一遍检查。
2.1、nodejs版本的查看
首先，需要检查一下nodejs的版本：
node -v
如果本机之前没有安装过nodejs，可通过官网下载安装包，然后进行傻瓜式安装。
传送门 => nodejs官方地址
我开发机的node版本是：v16.13.1
2.2、npm版本的查看
npm 是node自带的包管理工具，一般不需要主动安装，node安装完成后就可以直接使用。
作者本机的npm版本是：8.1.2
查看方式和上面相似：
npm -v
2.3、npm的镜像地址
之前使用 npm安装quasar（一款基于Vue3的UI框架）时报错了。报错信息如下：
>npm -g install quasar
npm ERR! code ETIMEDOUT
npm ERR! syscall connect
npm ERR! errno ETIMEDOUT
npm ERR! network request to https://registry.npmjs.org/quasar failed, reason: connect ETIMEDOUT 104.16.0.35:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\huiming.xu\AppData\Local\npm-cache\_logs\2024-02-22T11_01_44_990Z-debug.log
这架势是连接超时了。那么查看下npm的镜像地址吧：
npm config get registry
执行结果如下：
https://registry.npmjs.org/
或许可以将其镜像改为国内的替代镜像，这件事我们留到后面再做。
2.4、npm全局安装时文件的存放
在很多时候，我们都会使用 npm install -g 这样的命令全局安装某个功能模块。那么全局安装时，这些文件存放到哪里了呢？
有三种方法可以找出这个值。
方法一：
# 或者 npm config ls -l
npm config ls
其中的prefix后面接的值就是 npm本地仓库 的位置。
方法二：
npm config get prefix
方法三：
npm list -global
#执行结果
+-- cross-env@7.0.3
`-- yarn@1.22.19
我这边的值是：C:\Users\用户名\AppData\Roaming\npm
那么这个目录里面有些什么呢？
很显然是通过npm全局安装的模块。
另外npm安装时还有一个缓存目录，可以通过命令：
npm config get cache
获取其结果为：C:\Users\用户名\AppData\Local\npm-cache
三、配置的调整
因为当时安装nodejs时使用的是傻瓜式安装。所以才造就了npm的本地仓库和缓存目录都处于C盘。
从减少C盘占用，以及文件安全（系统可能会重做，如果放在C盘会导致数据的丢失）的角度，是需要将npm的本地仓库和缓存目录迁移到其他逻辑盘的。
同时前面还提到过npm安装过程中出现过连接超时的情况，所以还需要将node的镜像地址改为国内的镜像。
3.1、npm镜像的调整
目前淘宝的npm镜像是一个比较好的选择：
npm config set registry https://registry.npm.taobao.org/
验证修改生效：
npm config get registry
#执行结果
https://registry.npm.taobao.org/
在本地仓库的目录迁移后，我们可以再次安装下quasar，看是否能够安装成功。
3.2、npm本地仓库的迁移
我们先保持C盘的目录文件不动，而是在nodejs的安装目录下新建目录：node_global
然后执行命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
最后再回到C盘看下变化，发现原来下载的文件还在C盘。所以，需要手动将这些文件复制到新的目录中。
验证修改：
npm list -global
# 执行结果
D:\Program Files\nodejs\node_global
+-- cross-env@7.0.3
`-- yarn@1.22.19
从上面的结果可知，目录调整成功。
尝试安装一下vue
npm install -g @vue/cli
结果报错了：
提示证书过期了!!! 😃 😃 😃
好吧，看来是镜像地址错了，再来一遍：
#也可设置为全局配置：npm config set registry http://registry.npm.taobao.org/ -g
npm config set registry http://registry.npm.taobao.org/
在这里还是不要用https吧。
再次安装，又报了如下错误：
这是权限问题，当前用户没有创建目录的权限。办法是以管理员身份运行cmd，再次进行安装。在npm本地仓库中可以看到vue的相关文件已经存在了。
我看网上有人说需要修改环境变量path中npm的路径。我本机的值如下：
虽然不调整似乎也不影响安装。不过为了和实际情况一致，还是建议调整下。
另外还需要新增一个环境变量：
增加系统变量NODE_PATH
值为D:\Program Files\nodejs\node_global
3.3、npm缓存的迁移
这个和上面的步骤差不多：
1、在nodejs的安装目录下新建目录：node_cache
2、执行命令：
npm config set cache "D:\Program Files\nodejs\node_cache"
3、移动文件。手动将 C:\Users\用户名\AppData\Local\npm-cache 中的文件复制到新的目录中。
3.4、安装vue
在迁移npm仓库那一节中，我们尝试过安装vue，但是报错了。在解决一系列的报错了，我后来又进行了一次尝试：
npm install -g @vue/cli
结果安装成功了。控制台打印了很多信息，由于篇幅有限，并且那些信息无关紧要，所以就不在文章中贴出来了。
既然vue已经安装好了，那么我们肯定会很好奇：我们到底安装了那个版本的Vue呢？。
好吧，其实我也很想知道 😃 那么，如何查看vue的版本信息呢？
正确的方法如下：
#需要管理员权限
npm info vue
这里需要注意的是：执行查看命令，需要管理员权限。
我不止一次看到有人提到了如下的查看方式：
vue -V
我再强调一下：
该命令提供的是Vue脚手架的版本，而非vue的版本。
我vue版本信息如下：
可以很清楚地看出，vue的版本是 3.4.19
前面我提过之前安装 quasar 时连接超时了，那么我们接下来再重试一下，看一下现在如何。
3.5、再次安装quasar
闲言少叙，看代码：
npm install quasar -g
#执行结果
added 1 package in 2m
从执行结果看，quasar的安装是成功的。
注意点：
- 备份用户配置文件
因为在前面对npm的本地仓库和缓存进行了迁移，而迁移后的信息是存储在用户配置文件中的。
用户配置文件路径： C:\Users\用户名.npmrc
所以需要对其（用户配置文件）进行定期备份，以防止相关设置丢失
如果设置了用户配置或是全局配置，npm config list的执行结果会发生变化：
- Vue3.x对nodejs的版本是有要求的，需要v8.9及以上版本。
消息来源：https://cli.vuejs.org/zh/guide/installation.html
- Vue CLI 目前处于维护状态，所以现在都建议使用Vite创建新的Vue项目。
信息来源：https://cn.vuejs.org/guide/scaling-up/tooling.html
四、问题
4.1、.npmrc文件是什么？
答：npmrc 文件是干嘛的？
可以理解成npm running cnfiguration, 即npm运行时配置文件。
D:\Program Files\nodejs\node_modules\npm\npmrc 是npm的内置配置文件。其内容如下：
prefix=${APPDATA}\npm
npmrc的优先级
npmrc的优先级（由高到低）如下：
- 项目配置文件（位于项目的根目录；）
- 用户配置文件（~/.npmrc（windows系统位置：C:\Users\用户名.npmrc）；查看命令：npm config get userconfig）
- 全局配置文件（没有设置过全局配置，文件不存在；设置过，则位于
$PREFIX/etc/npmrc；$PREFIX查看命令：npm config get prefix） - 内置配置文件 （D:\Program Files\nodejs\node_modules\npm；Linux下查看命令：which npm）
删除配置
删除npmrc的配置有两种方式：
-
方式一：直接编辑.npmrc文件
-
方式二：执行命令：
npm config delete registry
参考文章：
https://blog.csdn.net/kelly0721/article/details/121908256
4.2、如何卸载已经安装的vue cli？
有时候需要将已经安装的vue cli进行卸载，以便安装其他版本。那么，可以使用如下命令：
npm uninstall -g @vue/cli
4.3、常见的npm镜像有哪些？
答：
常见镜像：
npm — https://registry.npmjs.org/
cnpm — https://r.cnpmjs.org/
taobao — https://registry.npm.taobao.org/
在实际设置时，可能需要使用http协议替换https协议，否则可能会报证书错误。
参考信息：https://zhuanlan.zhihu.com/p/35856841
五、小结
本文主要介绍Vue运行环境的搭建。读者需要知道的是Vue对nodejs的版本是有要求的。在使用npm原始镜像安装node应用的时候，我们遇到了超时的问题（部分安装会发生），此时就需要我们将原始镜像替换为国内的镜像，文章讲解了如何进行替换。
出于数据安全和减少C盘占用的目的，我们对npm的本地仓库和缓存目录进行了调整。调整的过程中会涉及到环境变量和npm配置的修改。
最后，我们全局安装了vue cli，并查询了vue的版本。然后又安装了基于vue的UI框架Quasar。
最终一切都ok了！！！
相关文章
[前端] 如何使用Quasar创建应用
