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的版本号,则说明安装成功。

相关推荐
光影少年18 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_19 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891122 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾23 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu25 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym30 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫31 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫35 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat36 分钟前
前端性能优化2
前端
SameX38 分钟前
鸿蒙 Next 电商应用安全支付与密码保护实践
前端·harmonyos