mac2024 安装node和vue

server/2024/11/24 7:32:26/

以下是使用 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


http://www.ppmy.cn/server/144482.html

相关文章

MATLAB矩阵元素的修改及删除

利用等号赋值来进行修改 A ( m , n ) c A(m,n)c A(m,n)c将将矩阵第 m m m行第 n n n列的元素改为 c c c&#xff0c;如果 m m m或 n n n超出原来的行或列&#xff0c;则会自动补充行或列&#xff0c;目标元素改为要求的&#xff0c;其余为 0 0 0 A ( m ) c A(m)c A(m)c将索引…

Vue进阶面试题目(一)

Vue 自定义事件中&#xff0c;父组件如何接收子组件传递的多个参数? 在 Vue 中&#xff0c;子组件可以通过 $emit 方法触发自定义事件&#xff0c;并传递参数。父组件可以通过监听这个事件来接收参数。如果子组件需要传递多个参数&#xff0c;可以将这些参数作为数组或对象传…

Build and Run不出现的原因

搞了半个小时&#xff0c;Build and Run不出现&#xff0c;一直不知道&#xff0c;原来需要点击switch platform转换一下就可以了 这里可以查看Android sdk

实践指南:EdgeOne与HAI的梦幻联动

在当今快速发展的数字时代&#xff0c;安全和速度已成为网络服务的基石。EdgeOne&#xff0c;作为腾讯云提供的边缘安全加速平台&#xff0c;以其全球部署的节点和强大的安全防护功能&#xff0c;为用户提供了稳定而高效的网络体验。而HAI&#xff08;HyperApplicationInventor…

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色,类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色&#xff0c;类似材质丢失 Addressable Play Mode Script加载模式 选择 Use Existiing Build 1.Unity 切换到 PC 平台&#xff0c;执行 Addressable Build 运行&#xff0c;加载 bundle 内的预制体 显示正常 2.Unit…

自然语言处理:第六十四章 Qwen2代码解析

本人项目地址大全&#xff1a;Victor94-king/NLP__ManVictor: CSDN of ManVictor 原文地址&#xff1a;微信公众平台 项目地址: QwenLM/Qwen2.5: Qwen2.5 is the large language model series developed by Qwen team, Alibaba Cloud. 官网地址: 你好&#xff0c;Qwen2 | Qw…

[Linux] 进程地址空间

1.程序地址空间铺垫&#xff08;以32位为例) a.粗力度验证上面的规则: 这时候我们就可以看出地址由低到高 b.地址有增长方向的验证 栈区变量怎么办? 天然的*heap等这些就是天然的指针变量在栈上的, 堆 上开辟一块空间,由栈上变量指向他栈向下(地址空间减少的方向)增长堆向上增…

论文阅读:SIMBA: single-cell embedding along with features

Chen, H., Ryu, J., Vinyard, M.E. et al. SIMBA: single-cell embedding along with features. Nat Methods 21, 1003–1013 (2024). 论文地址&#xff1a;https://doi.org/10.1038/s41592-023-01899-8 代码地址&#xff1a;https://github.com/pinellolab/simba. 摘要 大多…