前端环境的安装 Node npm yarn

一  node + npm 

1.下载NodeJS安装包

下载地址:Download | Node.js

2.开始安装

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

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

node -v

 

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

npm -v
 

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

二、环境配置

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

1.创建npm模块安装目录

安装时,默认是使用国外的镜像,速度较慢。推荐使用国内镜像!

分别在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.配置环境变量
我的电脑->右键->属性->高级系统设置->高级->环境变量

2.1新建NODE_PATH系统变量

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

三、测试

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

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

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

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

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 安装地址

添加到path 

打开 命令行 测试 成功

安装目录下 新建 yarn_global  yarn_cache 文件 

下载目录是为了配置 通过 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文件查看

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

3. 淘宝镜像源

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

# 查看当前源
yarn config get registry

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

至此 node  npm  yarn 就全部安装完毕了 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发中,脚手架是一种工具,用于快速搭建项目的基础结构和配置。Vue CLI是Vue.js官方提供的一个脚手架工具,用于创建Vue项目的标准结构和相关配置文件。安装Vue CLI可以通过在命令行中输入以下命令进行安装npm install @vue/cli -g(最新版本) 或 npm install vue-cli -g(非最新版本)。安装成功后,可以通过查询vue@cli的版本来确认安装是否成功。 至于yarn,它是一种替代npm的包管理工具,也可以用于安装、管理和构建前端项目的依赖。要安装yarn,可以首先安装Node.js,然后根据默认提示进行安装安装完成后,可以在新安装的快捷菜单中找到yarn的相关选项。 总结起来,如果你想安装前端脚手架并使用yarn进行包管理,你可以按照以下步骤进行操作: 1. 安装Node.js,根据默认提示进行安装。 2. 安装Vue CLI,通过命令行输入npm install @vue/cli -g(最新版本)或npm install vue-cli -g(非最新版本),并查询vue@cli的版本确认安装成功。 3. 安装yarn,根据默认提示进行安装。 希望对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [2021-05-06-前端-安装 vue 和 vue 脚手架环境-nodejs篇(涉及到npmyarn的讲解)](https://blog.csdn.net/m0_46551050/article/details/116454083)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值