安装vue脚手架出现的一系列问题

前言

由于已有较长时间未进行 vue 项目开发，今日着手准备开发一个新的 vue 项目时，在初始化环境阶段遭遇了诸多问题，过程可谓是困难重重。

使用 npm 安装 @vue/cli

• 数据源问题排查
  执行npm install -g @vue/cli命令后，长时间未得到响应。基于经验，初步怀疑是数据源存在问题。
  通过npm config get registry命令查看 npm 的源地址，结果显示为https://registry.npmjs.org/。
• 为提升下载速度，尝试将源地址修改为淘宝镜像源，使用npm config set registry https://registry.npm.taobao.org命令。执行npm install -g @vue/cli系统报错certificate has expired，表明证书已过期。这一错误提示意味着，由于证书过期，无法与该镜像源建立安全连接。
  
• 经过进一步研究，再次将源地址修改为https://registry.npmmirror.com
• 执行命令 npm config set resigtry https://registry.npmmirror.com

2.权限问题及解决

• 重新执行npm install -g @vue/cli命令后，出现permission denied的错误提示。这是由于npm在尝试安装@vue/cli到系统目录时，当前用户缺少相应的权限。在许多系统中，系统目录受到严格的权限保护，普通用户无法直接进行写入操作。
  

方法一：可以使用管理员权限进行安装。

在命令前添加sudo，即执行sudo npm install -g @vue/cli命令。
虽然方法简单，但是可能后续会需要频繁借助sudo以管理员权限来安装，

方法二：更改npm全局安装路径

• 创建用户可操作的全局安装目录
  首先，在你的用户主目录下创建一个用于存放全局npm包的文件夹。例如，在 Linux 和 Mac 系统中，用户主目录通常用~表示，你可以通过如下命令创建一个名为.npm-global的文件夹：mkdir ~/.npm-global
  这个文件夹将作为新的npm全局安装目录，而你作为该用户对自己主目录下创建的文件夹是有读写权限的，避免了涉及系统级目录的权限问题。
• 配置npm使用新的全局安装目录
  接着，运行以下命令来告知npm使用这个新创建的目录作为全局安装路径：
  npm config set prefix '~/.npm-global'
  如此一来，后续npm安装全局包时就会默认安装到这个新指定的目录中。
• 将新目录添加到系统环境变量PATH中
  最后，要让系统能够识别新的全局安装目录下的可执行文件，需要把该目录添加到系统的PATH环境变量里。
  对于 Bash 用户，在~/.bashrc文件中添加如下一行内容（如果是 Zsh 用户，则在~/.zshrc文件中添加）：
  修改配置vim ~/.zshrc
  添加配置export PATH=$PATH:~/.npm-global/bin
:wq 保存退出
  添加完成后，执行以下命令使配置生效：
  source ~/.bashrc
  或者（针对 Zsh 用户）：
  source ~/.zshrc

采用这种方式能够更优雅、合理地解决因权限问题导致npm安装全局包报错的情况，更符合规范的开发环境配置习惯

经过此番操作，终于成功完成了@vue/cli的安装。

通过这次安装过程，深刻认识到在搭建开发环境时，数据源的稳定性和权限设置对安装过程的顺利进行起着至关重要的作用。后续遇到类似问题时，能够更加迅速地定位并解决问题。