MacOS系统安装NodeJS以及配置全局安装路径

MacOS系统安装NodeJS以及配置全局安装路径

1.首先,打开NodeJS的官网:

nodejs.org/zh-cn

打开后官网首页如下图:

点击之后就开始下载了,下载完成后,双击下载好的文档就进行安装了

一旦您成功下载和安装了Node.js,您就可以使用npm命令了。npm是Node.js的包管理器,用于安装、管理和发布JavaScript软件包。

要使用npm命令,请按照以下步骤操作:

  1. 打开终端(Terminal)应用程序。
  2. 输入以下命令,检查Node.js和npm是否正确安装:

node -v

npm -v

这将显示您安装的Node.js和npm的版本号。如果显示版本号,则说明安装成功。

根据安装文档引导安装完成之后,接下来就是配置全局安装路径了

2.配置全局安装路径

在MacOS上,可以通过以下步骤配置npm的全局安装路径:

打开终端(Terminal)应用程序。

a.输入以下命令,创建一个用于存储全局安装的文件夹(例如,/usr/local/lib/npm):

bash 复制代码
sudo mkdir -p /usr/local/lib/npm

这将创建一个名为npm的文件夹,并将其放置在/usr/local/lib目录下。

b.输入以下命令,将全局安装路径设置为新创建的文件夹:

arduino 复制代码
sudo npm config set prefix /usr/local/lib/npm

这将告诉npm将全局安装的软件包放置在/usr/local/lib/npm目录下。

c.输入以下命令,将npm的bin目录添加到系统的PATH环境变量中:

bash 复制代码
echo 'export PATH="/usr/local/lib/npm/bin:$PATH"' >> ~/.bash_profile

这将在您的bash配置文件(.bash_profile)中添加一行,将npm的bin目录添加到系统的PATH环境变量中。

d.输入以下命令,使配置的更改生效:

bash 复制代码
source ~/.bash_profile

这将重新加载bash配置文件,使更改生效。

现在,您已成功配置了npm的全局安装路径。您可以使用npm全局安装软件包,并且它们将被安装在/usr/local/lib/npm目录下。

e.验证是否成功配置了npm的全局安装路径

1⃣️打开终端(Terminal)应用程序。
2⃣️输入以下命令,检查npm的全局安装路径是否正确设置:
arduino 复制代码
npm config get prefix

这将返回npm的全局安装路径。

注意,这里返回的路径应该是我们刚刚配置的

下图是我的电脑的全局npm路径(当然,大家配的路径不需要跟我的一模一样)

3⃣️输入以下命令,检查npm的全局安装路径是否已添加到系统的PATH环境变量中:
bash 复制代码
echo $PATH

这将返回系统的PATH环境变量,您可以检查其中是否包含npm的全局安装路径。

4⃣️输入以下命令,检查全局安装的软件包是否可用:
复制代码
npm list -g

这将列出所有全局安装的软件包。

这是我全部都配置好了的返回内容(因为我后面的步骤都做了,是你们的跟我的会有点不一样):

如果以上步骤中的命令返回了正确的路径和软件包列表,则说明您已成功配置了npm的全局安装路径。

3.完成上述操作后,接下来就是切换npm的淘宝镜像

切换npm的淘宝镜像是为了解决在使用npm安装软件包时可能遇到的网络速度慢或下载失败的问题。npm默认从官方的npm仓库下载软件包,但由于网络环境的原因,有时候可能会导致下载速度缓慢或无法连接到官方仓库。

淘宝镜像是一个国内的npm镜像源,它是官方npm仓库的一个镜像副本,位于国内服务器上。由于镜像源在国内,所以下载速度更快,可以提供更稳定的网络连接。

因此,切换npm的淘宝镜像可以帮助解决网络问题,提高npm软件包的下载速度和安装成功率,使开发者能够更快地获取所需的软件包并进行开发工作。

a.打开终端(Terminal)应用程序。

b.输入以下命令,将npm的镜像源设置为淘宝镜像:

arduino 复制代码
npm config set registry https://registry.npm.taobao.org

这将把npm的镜像源设置为淘宝镜像,从而加快npm软件包的下载速度。

c.输入以下命令,验证镜像源是否已成功切换为淘宝镜像:

arduino 复制代码
 npm config get registry

这将返回当前npm的镜像源。如果返回的是registry.npm.taobao.org/,则说明已成功切换为淘...

现在,您已成功将npm的镜像源切换为淘宝镜像。您可以使用npm命令来安装和管理软件包,它们将从淘宝镜像源下载。

4.安装Vue-cli

Vue CLI是一个基于Vue.js的官方脚手架工具,用于快速搭建Vue.js项目的开发环境。它提供了一套完整的项目脚手架,包括项目结构、构建配置、开发服务器等,使开发者能够更轻松地开始和管理Vue.js项目。

a.打开终端(Terminal)应用程序。

b.确保您已经安装了Node.js。您可以在终端中输入以下命令来检查Node.js的安装情况:

复制代码
node -v

如果返回Node.js的版本号,则说明已经安装了Node.js。如果没有安装,请先安装Node.js。

c.输入以下命令来安装Vue CLI:

bash 复制代码
npm install -g @vue/cli

这将使用npm全局安装Vue CLI。您可能需要输入管理员密码来完成安装。

d.安装完成后,您可以输入以下命令来验证Vue CLI是否成功安装:

css 复制代码
vue --version

如果返回Vue CLI的版本号,则说明安装成功。

相关推荐
腾讯TNTWeb前端团队44 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试