文章目录
一、背景说明
最近想使用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了!!!
相关文章