从脚手架开始学前端 【第2期】WINDOWS安装Node.js及配置

简介: Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

一、简介



Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。


二、下载Node单版本



windows下的Node.js安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮,直接点击就会自动下载安装了。微信图片_20220519115944.png



三、Node多版本管理(NVM)



NVM一开始只为linux和macos实现,因为是用shell脚本写的,后续流行起来后,就开始有周边了,包括兼容windows的衍生库

直接下载 nvm-windows安装包安装即可。

$ nvm install 10.15.0

# 下载编译和安装指定版本node

$ nvm use 10.15.0 # 切换(使用)指定版本node

$ nvm alias default 10.15.0 # 设置shell默认版本


四、Node.js 安装



1、鼠标双击node-v12.13.0-x64.msi开始安装微信图片_20220519120023.png


2、勾选同意协议,点击Next微信图片_20220519120059.png


3、修改安装路径,点击Next微信图片_20220519120126.png


4、Add to PATH 选择安装到本地,点击Next微信图片_20220519120155.png


5、点击Next微信图片_20220519120239.png


6、点击Install微信图片_20220519120306.png


7、出现安装进度界面和进度条,开始安装,如果要取消安装,点击Cancel即可微信图片_20220519120343.png


8、安装成功,点击Finish关闭页面,即为安装成功。测试的时候可以使用cmd(win+r然后输入cmd进入)测试下是否安装成功。

方法:在cmd下输入node -v,出现下图版本提示就是完成了NodeJS的安装。微信图片_20220519120412.png


五、npm 安装



新版的NodeJS已经集成了npm,所以npm也一并安装好了。

可以在cmd命令行输入"npm -v"来测试是否成功安装。


六、配置



1、NodeJS环境变量配置

windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“D:\Program Files\nodejs”)

微信图片_20220519120448.png


2、npm配置

npm作为一个NodeJS的模块管理,需要配置模块路径、cache路径。

a.在node.js的安装根目录中新建“node_global”和"node_cache"两个文件夹。微信图片_20220519120526.png


b.使用cmd命令进行配

$ npm config set prefix "D:\Program Files\nodejs\node_global"
$ npm config set cache "D:\Program Files\nodejs\node_cache"

微信图片_20220519120558.png

注意:如果不进行这一步设置,npm的全局安装包,将不会在node安装文件夹里。

3、配置环境变量

打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框,在系统变量下新建"NODE_PATH",输入”D:\Program Files\nodejs\“。微信图片_20220519120634.png


点击Path - 新建微信图片_20220519120703.png


设置NODE_PATH微信图片_20220519120735.png


在系统变量下新建Path输入”%NODE_PATH%\node_global\node_modules“。(ps:这一步相当关键。)

由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下,用户变量"PATH"修改为“%NODE_PATH%\node_global\”)微信图片_20220519120818.png


注意:

如果不配置,npm install xx -g(global)(global全局安装的意思)会将安装的模块默认安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,长期会是C盘空闲变小,电脑慢慢变慢。

七、测试


全局安装svue-cli脚手架进行测试

$ npm i svue-cli -g
$ yarn global add svue-cli
$ npm install svue -g
$ yarn global add svue
$ npm i evue-cli -g
$ yarn global add evue-cli
$ npm i evue -g
$ yarn global add evue



目录
相关文章
|
20天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
43 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
1月前
|
前端开发 JavaScript
前端常用的ESlint配置
前端常用的ESlint配置
43 1
|
1月前
|
JavaScript 前端开发 CDN
总结 vue3 的一些知识点:Vue.js 安装
总结 vue3 的一些知识点:Vue.js 安装
|
24天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
99 0
|
19小时前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
5 0
|
19小时前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
9 0
|
14天前
|
JavaScript 前端开发 CDN
Vue.js 安装
Vue.js 安装
|
1月前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。