Vue3.0环境搭建之npm的安装_npm 安装vue3

---

一、背景说明

最近想使用Vue做一些小的功能，但是之前只使用过Vue2。听说Vue3和Vue2的区别还是比较大的，并且Vue2后续将不再维护，所以就想着尝试使用Vue3搭建应用。在此之前需要对原来的npm进行一些调整，以方便Vue的安装。

二、现有npm情况

因为本机之前安装过nodejs，但已经是很久之前的事情了，所以需要对环境再进行一遍检查。

2.1、nodejs版本的查看

首先，需要检查一下nodejs的版本：

node -v
1

如果本机之前没有安装过nodejs，可通过官网下载安装包，然后进行傻瓜式安装。
传送门 => nodejs官方地址

我开发机的node版本是：v16.13.1

 

2.2、npm版本的查看

npm 是node自带的包管理工具，一般不需要主动安装，node安装完成后就可以直接使用。

作者本机的npm版本是：8.1.2
查看方式和上面相似：

npm -v
1

 

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
1
2
3
4
5
6
7
8
9
10
11
12
13

这架势是连接超时了。那么查看下npm的镜像地址吧：

npm config get registry
1

执行结果如下：

https://registry.npmjs.org/
1

或许可以将其镜像改为国内的替代镜像，这件事我们留到后面再做。

 

2.4、npm全局安装时文件的存放

在很多时候，我们都会使用 npm install -g 这样的命令全局安装某个功能模块。那么全局安装时，这些文件存放到哪里了呢？
有三种方法可以找出这个值。

方法一：

# 或者 npm config ls -l
npm config ls 
1
2

其中的prefix后面接的值就是 npm本地仓库 的位置。

 
方法二：

npm config get prefix
1

 
方法三：

npm list -global
#执行结果
+-- cross-env@7.0.3
`-- yarn@1.22.19
1
2
3
4

我这边的值是：C:\Users\用户名\AppData\Roaming\npm

那么这个目录里面有些什么呢？

很显然是通过npm全局安装的模块。

另外npm安装时还有一个缓存目录，可以通过命令：

npm config get cache
1

获取其结果为：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/
1

验证修改生效：

npm config get registry
#执行结果
https://registry.npm.taobao.org/
1
2
3

在本地仓库的目录迁移后，我们可以再次安装下quasar，看是否能够安装成功。

 

3.2、npm本地仓库的迁移

我们先保持C盘的目录文件不动，而是在nodejs的安装目录下新建目录：node_global

然后执行命令：

npm config set prefix "D:\Program Files\nodejs\node_global"
1

最后再回到C盘看下变化，发现原来下载的文件还在C盘。所以，需要手动将这些文件复制到新的目录中。

验证修改：

npm list -global
# 执行结果
D:\Program Files\nodejs\node_global
+-- cross-env@7.0.3
`-- yarn@1.22.19
1
2
3
4
5

从上面的结果可知，目录调整成功。

尝试安装一下vue

npm install -g @vue/cli
1

结果报错了：

提示证书过期了!!!