自学内容网 自学内容网

mac2024 安装node和vue

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

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

  1. 设置 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

  1. 安装 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:

  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 的欢迎页面。

  1. 优化网络(可选)

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

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

运行以下命令:

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

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

运行以下命令:

npm config get registry

输出应为:

https://registry.npmmirror.com

  1. 常见问题及解决方案

问题 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


原文地址:https://blog.csdn.net/fjh_ready_sonaa/article/details/143905529

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!