node 无法打开安装包_带你快速搭建Vue前端项目Node篇

‍‍点击上方 Java项目学习 ,选择 星标 公众号

重磅资讯、干货,第一时间送达

前言:Javascript语言最初只能运行在浏览器中,而传统的web开发者在写服务器代码的时候,还必须用另外一种语言来开发。在Ryan基于Chrome V8引擎开发了Node.js以后,Javascript就可以前后端通吃了。当前非常受欢迎的React/Vue这样的前端框架,其开发环境的基础就是Node.js。

1 Node简介

8f8344a33ad32d983e413d521b95e3e4.png

作为异步事件驱动的JavaScript运行时,Node.js旨在构建可扩展的网络应用程序。可以说Node.js 不是库,是一个运行环境,或者说是一个 JS 语言解释器。

2 Node安装

在安装好Node.js 之后,就会配套安装一个命令,叫做 npm。npm 是Node Package Manager 的缩写,意思是 Node 的包管理系统。通过npm install命令就可以将需要安装的包安装到本地。接下来,让我们一起看下安装的步骤。

2.1 官网下载

您可以在官网:https://nodejs.org/en/,下载安装包安装。aeb5ac404fc45f4d4ffab3bf685b4810.png

2.2 镜像下载

由于官网下载速度比较慢,所以推荐通过国内镜像去下载,国内镜像地址:http://nodejs.cn/download/current/。我们选择对应的操作系统和版本号下载安装,一般可以选择.msi安装包安装。b836c01544341fc366dbfb69dc486e39.png

2.3 安装

  1. 双击安装包,打开安装向导。58be7f30d81a9342d6bd7758dd685b55.png
  2. 点击Next,勾选同意协议,点击Next。127ebade7e2b3a55f7e81c2a5730bb8b.png
  3. 选择安装路径,点击Next。813d6171439a7a5cdeab715afa9a9eea.png
  4. 选择第一个,点击Next。7116a720b8e647331da1b729ce544dfb.png
  5. 选择是否自动安装这些工具,可以不勾选。如果勾选了后续会出现确认安装这些工具的控制台弹窗,点击Next。d430159b3e40f6e470ec63eda1d5ae0a.png
  6. 开始安装,点击Install。88f4af4e46a26f9ba64581252010852c.png
  7. 安装完成后,会出现安装完成确认页面,点击Finish。3692c96967b608975a02d383a157dccb.png
  8. Windows+R打开命令行,输入cmd,打开控制台窗口。在控制台中输入node -vnpm -v,出现版本号说明安装成功了。e024d297416f715a0ec948e8a5a8cbab.png

2.4 配置npm在安装全局模块时的路径和缓存cache的路径

  1. 在node.js安装目录下新建两个文件夹 node_global和node_cache,来存放默认安装的模块。然后在控制台执行如下两个命令:
    npm config set prefix 'D:\setup\node\node_global'
    npm config set cache 'D:\setup\node\node_cache'
  2.   设置好之后,我们可以通过在控制台中输入npm config list查看当前的配置项a91a88a6eb4cd36d8431cd5863562282.png

2.5 配置环境变量和系统变量

  1. 修改npm路径为D:\setup\node\node_global,配置环境变量前后如图所示。8774509037895d2861e032068bd17cdc.png81d3412ac1d8c9a76e1cf23b75b59c9e.png
  2. 配置系统变量。点击新建按钮,添加NODE_PATH,如图所示。在配置完之后记得点击确定,不然配置项不生效。a642d8d2579ac8f344da654eb15f8779.png

3 安装webpack

  1. 在控制台输入命令
npm install webpack -g 

在node_global文件夹下可以看到webpack安装成功。b6217f89aae1cc5a4690993f627e5b0f.png

4 卸载

  1. 在安装好node环境之后,如果您想卸载当前的node环境,您可以双击下载好的安装包,打开安装向导,点击Next。58be7f30d81a9342d6bd7758dd685b55.png
  2. 选择Remove,点击Next。9552e64226fd38d1642448b3dacd30cd.png
  3. 点击Remove,确认移除当前node.js55e7a23f3024eea7a80966484dfc2379.png
  4. 开始移除aaf7eb84b50fa77344cd0bf724ac50e2.png
  5. 移除完成f8ee0b60643c1047ebafadfb43c91574.png

5 总结

写这篇文章时,作者已按安装步骤进行实操。通过以上按照步骤,您可以在电脑上搭建所需的node环境,后续我们会基于这些基础的环境去搭建一个简单的Vue前端项目。

往期文章:

CSS设计基础--初识篇

Chrome 开发者工具各种骚技巧 ! 你知道几个?

SpringBoot:切面AOP实现权限校验:实例演示与注解全解

带你快速搭建Vue前端项目--Git篇

9109bebd5ecfec53a66db404a0c887ed.png

点个在看

你最好看

725ceef5862c84a6298bd819deecdde2.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值