Node.js与VUE安装

发布于:2025-03-11 ⋅ 阅读:(35) ⋅ 点赞:(0)

Win

下载

直接从官网下载官网地址:https://nodejs.org/en/
在这里插入图片描述
如果是window7系统: 下载安装13的版https://nodejs.org/dist/latest-v13.x/
在这里插入图片描述

安装

一路下一步安装即可

Mac

下载

官网 https://tomcat.apache.org/download-10.cgi

安装

  • 双击安装包
    在这里插入图片描述
    在这里插入图片描述
  • 一直下一步即可安装完毕
    在这里插入图片描述

Win与Mac配置

检查是否安装成功

  • 输入 node -v
  • 输入 npm -v
    在这里插入图片描述

切换淘宝NPM库

  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • npm config set registry https://registry.npm.taobao.org (弃用了)
  • npm config set registry https://registry.npmmirror.com(推荐)

检查镜像配置是否生效

  • npm config list
  • npm config get registry
    • 应输出为刚才设置的网址
      在这里插入图片描述

设置 npm 全局环境目录(避免权限问题)

Win

注意:D:\develop\NodeJS 这个目录是NodeJS的安装目录

npm config set prefix "D:\develop\NodeJS"

Mac

  • 默认情况下,npm 全局包会安装到 /usr/local/,可能需要管理员权限。以下是重新设置 npm 全局环境的方法:
  • 创建新的全局目录
    mkdir ~/.npm-global
    
  • 配置 npm 使用新的目录
    运行以下命令设置 npm 全局目录到用户目录:
    npm config set prefix ~/.npm-global
    
  • 添加目录到环境变量
    将新目录添加到 PATH 环境变量中:
    编辑 ~/.zshrc 文件(如果是 bash,编辑 ~/.bashrc):
    vim  ~/.zshrc
    添加以下内容
    export PATH=$PATH:~/.npm-global/bin
    
  • 验证新的 npm 配置
    运行以下命令,确认 npm 的全局目录已更改:
    npm config get prefix
    输出应为:
    /Users/<你的用户名>/.npm-global
    

VUE安装

安装 Vue CLI

  • 注意事项
    • 使用–force选项可能会忽略一些重要的错误信息,导致安装的包不完全符合预期,使用时需谨慎。
    • 在大多数情况下,建议先检查网络连接和权限设置,尽量避免使用强制安装选项。
默认安装命令
npm install -g @vue/cli
是默认的安装命令,用于全局安装Vue CLI工具。这个命令会尝试正常安装Vue CLI,如果过程中遇到问题,可能会失败。
强制安装命令
npm install -g @vue/cli --force
是在默认命令的基础上增加了--force选项,用于强制安装Vue CLI。这个选项会在安装过程中遇到错误时尝试继续进行,即使某些包或依赖无法正常下载或安装。

验证 Vue CLI

vue --version
如果输出类似 @vue/cli 5.x.x,说明安装成功。

打开vue面板

vue ui
会自动弹出网页或者显示网址链接