前端环境的安装 Node npm yarn

这篇具有很好参考价值的文章主要介绍了前端环境的安装 Node npm yarn。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一  node + npm 

1.下载NodeJS安装包

下载地址:Download | Node.js

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

2.开始安装

打开安装包后,一直Next即可。当然,建议还是修改一下安装位置,NodeJS默认安装位置为 C:\Program Files

3.验证是否安装成功
打开DOS命令界面:

node -v

 前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

出现NodeJS版本即为安装成功!

npm -v
 

 出现npm的版本号说明npm工具也已安装成功!

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

二、环境配置

说明:环境配置的目的主要是为了改变安装NodeJS依赖的下载位置,方便日后管理,以及配置缓存Cache的路径。因为NodeJS在执行安装语句时,会将安装的模块默认安装到**C:\Users\用户名\AppData\Roaming\npm**,从而占用C盘的空间。

1.创建npm模块安装目录

安装时,默认是使用国外的镜像,速度较慢。推荐使用国内镜像!
前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

分别在NodeJS安装目录下创建node_cache和node_global两个文件夹,如上图所示。
创建文件夹后,打开dos命令窗口,分别执行下面两行命令

npm config set prefix "D:\MySoftware\nodejs\node_global"
npm config set cache "D:\MySoftware\nodejs\node_cache"

2.配置环境变量
我的电脑->右键->属性->高级系统设置->高级->环境变量

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

2.1新建NODE_PATH系统变量

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

 其实看到这个变量值我开始是有一些疑问的,明明node_global是一个空文件夹,为什么这个值需要定义到一个不存在的文件夹上,原来后面node会自动创建。

三、测试

我们先安装一个express模块试试

打开dos命令窗口,执行下面的命令

npm install express -g      # -g  是全局安装的意思

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

 安装成功!
打开D:\MySoftware\nodejs\node_global\node_modules目录

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

4、配置taobao源
//查看镜像源
npm get registry
//修改成淘宝镜像源
npm config set registry https://registry.npm.taobao.org

四 yarn 的安装 

1 安装yarn

//全局下载yarn
npm install -g yarn
//全局删除yarn
npm uninstall yarn -g

2 配置 环境变量

配置环境变量其实原理很简单,就是把你安装的文件目录添加到 Path 系统变量中,这样在执行的时候就能够找到这些文件。所以只需要把下面的路径(安装路径,就是可执行文件 yarn.cmd 的位置,此处是通过 npm 全局安装的)添加到 Path 中即可。

复制yarn 安装地址

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

添加到path 

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

打开 命令行 测试 成功

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

安装目录下 新建 yarn_global  yarn_cache 文件 

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

下载目录是为了配置 通过 yarn 安装的全局命令工具的存储位置。

# 全局安装目录
yarn config set global-folder "D:\Program Files (x86)\nodejs\node_globa\node_modules\yarn\yarn_global"

# 缓存目录
yarn config set cache-folder "D:\Program Files (x86)\nodejs\node_globa\node_modules\yarn\yarn_cache"

检验是否设置成功,可以直接在C:\Users\用户名目录下打开.yarnrc文件查看

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

前端环境的安装 Node npm yarn,网络,浏览器,工具,Vue3.0X,前端,前端,npm,node.js

如果你遇到了yarn命令无法执行的情况,可以试着删掉这个文件再重新配置

3. 淘宝镜像源

原始资源有时候是外网的,下载速度比较慢。配置淘宝镜像源,是为了加快安装依赖的速度。

# 查看当前源
yarn config get registry

# 修改为淘宝镜像源
yarn config set registry https://registry.npm.taobao.org

至此 node  npm  yarn 就全部安装完毕了 文章来源地址https://www.toymoban.com/news/detail-740029.html

到了这里,关于前端环境的安装 Node npm yarn的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Node.js和浏览器在JavaScript运行环境方面存在一些区别和联系

    Node.js和浏览器在JavaScript运行环境方面确实存在一些区别和联系。 首先,让我们理解一下Node.js和浏览器的运行环境。Node.js是一个基于Chrome的V8引擎的服务器端JavaScript运行环境,允许开发者在服务器端运行JavaScript代码,并且提供了一系列的内置模块,如fs模块用于文件系统操

    2024年03月14日
    浏览(48)
  • Node.js中的process.nextTick与浏览器环境中的nextTick有何不同?

    nextTick 是一个用于异步操作的函数,用来在当前执行栈执行完毕后,在下一个事件循环中执行指定的回调函数。它通常用于在本轮事件循环结束前执行一些需要延迟执行的代码。 具体来说, nextTick 将指定的回调函数放入微任务队列中,确保在下一个事件循环中立即执行。这

    2024年02月12日
    浏览(42)
  • web大前端面试——浏览器、网络和安全

    (1).DNS解析 当我们在浏览器中输入一个域名的时候,例如www.mi.com,这个域名只是与IP地址的一个映射,这时DNS解析就要充当一个翻译的角色,把域名解析成真实的IP地址。所以DNS解析的过程实际上就是将域名还原成真实IP地址的过程。 DNS的解析又分为以下几个步骤: 1.浏览器会

    2024年02月03日
    浏览(42)
  • 走进前端和vscode插件安装、认识浏览器、Gitee提交

    前端的概念 首先我们先了解一下前端的通俗概念:前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验

    2023年04月17日
    浏览(39)
  • npm超详细安装(包括配置环境变量)!!!npm安装教程(node.js安装教程)

    安装node.js:(建议选择相对低一点的版本,相对稳定) ​ 下载完成直接点击next即可(安装过程中会直接添加path的系统变量,变量值是自己的安装路径,可自行选择,比如:D:software) ​ 安装完成:win+R打开电脑控制台,输cmd进入,输入( node -v ; npm -v )测试是否安装成功 ​ 安装

    2024年01月18日
    浏览(51)
  • linux中安装node,npm和yarn

    在Linux系统上安装Node.js,按照以下步骤进行操作: 打开终端:使用任何适用的方法打开终端。 更新软件包列表:执行以下命令以确保系统的软件包列表是最新的。 安装Node.js:使用包管理器(例如apt)安装Node.js。以下是使用apt安装Node.js的命令: 这将安装Node.js的最新稳定版

    2024年02月16日
    浏览(40)
  • Linux centos环境 安装谷歌浏览器

    教程 地址

    2024年02月05日
    浏览(50)
  • window系统安装node,配置环境变量npm指令

    首先 你要在本地创建一个文件夹 来放node window我们直接访问node下载地址 根据自己的电脑配置 选择对应的版本 这里的话 我建议还是选择 .msi 文件 处理会方便一点 下砸好之后我们直接双击运行 然后 下一步 Next 然后 勾选下面的协议 然后 继续下一步 这个都没必要看 只能说你

    2024年02月12日
    浏览(70)
  • 【node】关于npm、yarn、npx的区别与使用

    用途: npm 是 Node.js 官方提供的包管理工具,用于安装、管理和分享 JavaScript 代码包。 安装依赖: 可以通过 npm install 安装项目依赖,例如: npm install package-name 。 运行脚本: 可以在 package.json 文件中定义脚本,通过 npm run script-name 执行脚本。 版本管理: 提供版本管理,可以

    2024年01月25日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包