mac2024 安装node和vue

以下是使用 Node.js 官方 .pkg 安装包安装 Node.js 和 Vue CLI 的完整流程，包括如何重新设置 npm 的环境，以避免权限问题。

安装 Node.js

步骤 1.1：下载 Node.js 安装包

复制代码

1.	打开 Node.js 官网。
2.	下载 LTS（长期支持）版本，它更稳定，适合生产环境。

步骤 1.2：安装 Node.js

复制代码

1.	双击下载的 .pkg 文件。
2.	按照安装向导完成安装（默认安装路径 /usr/local/）。
3.	安装完成后，打开终端，验证是否安装成功：

node -v

npm -v

如果输出 Node.js 和 npm 的版本号，说明安装成功。

设置 npm 全局环境目录（避免权限问题）

默认情况下，npm 全局包会安装到 /usr/local/，可能需要管理员权限。以下是重新设置 npm 全局环境的方法：

步骤 2.1：创建新的全局目录

mkdir ~/.npm-global

步骤 2.2：配置 npm 使用新的目录

运行以下命令设置 npm 全局目录到用户目录：

npm config set prefix ~/.npm-global

步骤 2.3：添加目录到环境变量

将新目录添加到 PATH 环境变量中：

编辑 ~/.zshrc 文件（如果是 bash，编辑 ~/.bashrc）：

nano ~/.zshrc

复制代码

2.	添加以下内容：

export PATH=$PATH:~/.npm-global/bin

复制代码

3.	保存并退出（Ctrl + O 保存，Ctrl + X 退出）。
4.	重新加载环境变量：

source ~/.zshrc

步骤 2.4：验证新的 npm 配置

运行以下命令，确认 npm 的全局目录已更改：

npm config get prefix

输出应为：

/Users/<你的用户名>/.npm-global

安装 Vue CLI

使用重新配置的 npm 安装 Vue CLI。

切换 npm 镜像到淘宝镜像

运行以下命令：

npm config set registry https://registry.npmmirror.com

步骤 5.2：验证镜像是否配置成功

运行以下命令：

npm config get registry

输出应为：

https://registry.npmmirror.com

步骤 3.1：全局安装 Vue CLI

运行以下命令安装 Vue CLI：

npm install -g @vue/cli

步骤 3.2：验证 Vue CLI

运行以下命令确认安装成功：

vue --version

如果输出类似 @vue/cli 5.x.x，说明安装成功。

步骤 5.1：

创建并运行 Vue 项目

步骤 4.1：创建 Vue 项目

复制代码

1.	创建一个新项目：

vue create my-vue-app

复制代码

2.	按提示选择默认配置或手动选择功能（建议选择默认配置）。

步骤 4.2：进入项目并启动开发服务器

复制代码

1.	进入项目目录：

cd my-vue-app

复制代码

2.	启动开发服务器：

npm run serve

步骤 4.3：打开浏览器

打开浏览器访问：

http://localhost:8080

你会看到 Vue 的欢迎页面。

优化网络（可选）

如果你在使用 npm 安装依赖时速度较慢，可以配置国内 npm 镜像：

步骤 5.1：切换 npm 镜像到淘宝镜像

运行以下命令：

npm config set registry https://registry.npmmirror.com

步骤 5.2：验证镜像是否配置成功

运行以下命令：

npm config get registry

输出应为：

https://registry.npmmirror.com

常见问题及解决方案

问题 1：安装全局包时仍提示权限不足

复制代码

•	确保已正确设置 npm 的全局目录。
•	如果问题仍然存在，可以尝试使用 sudo：

sudo npm install -g @vue/cli

问题 2：Vue 项目依赖安装速度慢

复制代码

•	配置淘宝镜像（见步骤 5）。

问题 3：项目运行时报错

复制代码

•	确保 Node.js 和 npm 的版本兼容。
•	删除项目的 node_modules 并重新安装依赖：

rm -rf node_modules

npm install

完整命令总结

复制代码

1.	安装 Node.js：
•	从 Node.js 官网 下载并安装。
•	验证安装：

node -v

npm -v

复制代码

2.	配置 npm 全局目录：

mkdir ~/.npm-global

npm config set prefix ~/.npm-global

echo 'export PATH=$PATH:~/.npm-global/bin' >> ~/.zshrc

source ~/.zshrc

复制代码

3.	安装 Vue CLI：

npm install -g @vue/cli

vue --version

复制代码

4.	创建并运行 Vue 项目：

vue create my-vue-app

cd my-vue-app

npm run serve

复制代码

5.	（可选）切换 npm 镜像：

npm config set registry https://registry.npmmirror.com

总结

通过官方 .pkg 文件安装 Node.js 是一种简单直接的方式。重新设置 npm 的全局目录可以避免权限问题，推荐优先配置。同时，可以通过 Vue CLI 快速创建和运行 Vue 项目。 😊

在磁盘上创建vue项目

cd /Volumes/T7\ MAC/vueproject

pwd 查看路径

vue create my-vue-app