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

相关推荐
你的人类朋友33 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端