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 环境变量中：
1. 编辑 ~/.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