Vue前端知识|Node.js安装及环境变量配置(新手教学)

觉得有用的话就点个关注吧!


一、写在前面

     由于科研需要,需要学习前端知识。我记录了我在安装Node.js与配置环境变量所遇到的问题以及总结了解决这些问题的方法。本文针对新手小白提供全面的保姆教学。希望大家能够快速进行安装配置!不要像我一样浪费了时间!

二、软件介绍

     Node.js 是一个开源的、跨平台的 JavaScript 运行环境,允许开发者在网页浏览器之外运行 JavaScript 代码。

     它基于 Chrome 的 V8 JavaScript 引擎构建,并提供了一个事件驱动、非阻塞的 I/O 模型,使其高效且轻量。Node.js 通常用于构建可扩展的网络应用程序,并拥有一个庞大的库和框架生态系统,简化了开发过程。它被广泛用于服务器端脚本、实时应用程序和构建 API(应用程序编程接口)。

     意思是要开发Vue 项目就必须得下载安装!

三、软件下载

1. Node.js官网直接下载。

https://nodejs.org/en/download/current
  • 首页直接选择左边的18.1.1LTS。该版本稳定。当然你可以选择右侧的最新版。

图片

  • 根据自己的电脑系统下载对应的安装包。如果是windows64位, 直接选择Windows Installer 64-bit。

图片

2. 你也可以关注私信我,我把安装包发给你。

公众号 沉于海底的小石头

欢迎关注,不定期分享小潘的读研生活和学习笔记。从GIS到遥感再到湿地生态,路在何方,仍需上下求索。3篇原创内容

四、Node.js安装

下面是详细安装步骤,跟着来一直点Next就行。路径可换成自己的路径。

  1. 找到安装目录、直接打开安装文件右键点击运行。

  2. 进入欢迎页面,点击Next。

    图片

  3. 浏览agreement内容,勾选IAccept 点击Next。

    图片

  4. 关键内容 选择自己的安装位置。我在D盘新建了个文件夹。所以我的路径用的是D:\NodeJs。这个路径之后还会用到。PS:路径不要有中文。

    图片

  5. 在自定义设置这个页面可以选择安装的功能。翻译在下面。默认安装直接点击Next。

    图片

  6. 自动安装其他必要工具。可选可不选。点击Next。

    图片

  7. 直接选择Install 点击安装,等待完成以后就行。

    图片

  8. 等待安装进度完成。

    图片

  9. 出现这个界面,说明就安装好了。

    图片

    到这你以为就安装好了吗?

            不一定,我们测试一下。

检查自己安装情况。

  • 使用快捷键Win+R ,输入cmd,打开黑色的控制台界面

    图片

  • 输入node -v 看到安装版本信息。输入npm -v可以查看npm版本。这是因为新版Node.js 集成了npm,所以也可以使用。

    输的时候一定一定不要忘记中间有个空格。我没输就走了好多弯路。

  • 然后出现什么界面?如果出现一串版本号,那就恭喜你完成安装了。下面不用看了。

    图片

  • 如果倒霉出现我这个情况,就往下看。

    图片

五、环境变量配置

         百度搜到的某些情况并不适用你的问题。别走弯路了。在这里我就不把弯路列出来了。

关于环境变量配置的步骤(windows 11)

  1. 找到控制面板,点击系统和安全

    图片

  2. 在这里找到系统并点击。

    图片

  3. 选择高级系统设置,打开系统属性面板,点击下方的环境变量,够仔细了吧。

    图片

    图片

  4. 选择下方的系统变量,下拉框找到Path 再点击编辑,顺序别错。

    图片

  5. 还记得之前说的安装路径吗,把你的路径添加进去,你也可以点击浏览找到你那个文件夹。有俩个输入框,选择下面那个变量值。

    图片

  6. 然后一直点击确定就行了。到这里就配置完成了。

重新打开cmd,输入node -v,如果能够正常显示node.js的版本号,则表明node.js安装成功。

六、补充说明

  • 如果你还是不行。找到你下载路径文件夹。右击选择属性,点击安全 ,然后点击编辑

    图片

  • 把权限全改成允许。

    图片

  • 重新打开cmd,输入node -v,如果能够正常显示node.js的版本号,则表明node.js安装成功。

七、预告

到这里才把Node 装上。接下类更新内容有。

目录:

1.修改npm modules 中全局模块和缓存下载位置及问题相关总结

2.测试安装express模块npm install express -g 的使用及报错处理办法。

3.没有梯子情况下,默认镜像查询及修改成基于淘宝源镜像 cnpm

4.如何在VScode 创建并运行Vue 3.0新项目



作品原创,创作不易,仅供学习和交流,未经授权禁止转载。

公众号沉于海底的小石头

欢迎关注,不定期分享小潘的读研生活和学习笔记。从GIS到遥感再到湿地生态,路在何方,仍需上下求索。

PS:谢谢你看到最后!虽然整理成这些内容会很费时间,也不知道有没有用。但是如果不记录下来,我也不知道自己一天天在忙些什么。害,加油吧。感谢公众号IT就自学的内容。感谢阿帅、阿迪、阿富的对本文的帮助。

  • 29
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉于海底的小石头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值