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

相关推荐
顽疲8 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好41 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享42 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript