史上无敌的超级详细的Node Js 环境搭建步骤

news2024/11/18 11:41:10

今日分享内容

一、Node Js 环境搭建

1、Node.js是什么?

2、npm是什么?

3、环境搭建步骤:

二、Element简介


一、Node Js 环境搭建

1、Node.js是什么?

Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
 Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 。

总的来说就是:nodeJS是JavaScript脚本语言的运行环境

  注意:

        Node.js-->JavaScript运行环境,开发语言是:javascript
       J2EE   -->Java运行环境, 开发语言是java
        Node.js v10.15.3文档地址:http://nodejs.cn/api/

2、npm是什么?

 npm其实是Node.js的包管理工具(package manager),相当于后台的maven。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。 如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用, 直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。 更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,
   npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

3、环境搭建步骤:

 第一步:

进入官方网站:https://nodejs.org/en/ 

 我建议大家最好不要使用最新的版本,一般最新的版本会不太稳定,我选择的版本是node-v10.15.3的。

下载之后解压一定要放在非中文目录下!!!!


 第二步:

解压nodeJS的解压包,在根目录下新增两个文件夹node_globalnode_cache 

 

 第三步 :

① 新增NODE_HOME  值为:D:\initPath\node-v10.15.3-win-x64    【这里放的是路径】

注意:  一定要区分分号,保证是英文分号!! 

② 修改Path并在最后添加:;%NODE_HOME%;%NODE_HOME%\node_global; 

如果系统版本不一样的话,还可以这样配置Path:

 

测试输入    node -v

 

 出现版本号则代表配置成功!!!!!耶耶耶! 

 第四步:

配置npm的全局模块的下载地址

(因为nodejs运行的环境这个平台是国外的,那么里面的js肯定也是放在国外的,所以我们需要去改变这个源。)

设置缓存目录

设置全局变量

加快npm下载js依赖的速度

【注意:这里面放的路径是根据自己的根目录存放的,doc命令运行需要一行一行的运行】

        npm config set cache "F:\Software path\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "F:\Software path\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/

doc命令运行 之后,去到本机账号,找到.npmrc文件,点击查看是否还有以上这三行脚本,有则代表成功,反之则需要重新来过,如图所示: 

 第五步:

下载github的Vue的项目解压

验证安装结果:版本验证 输入 npm -v

显示版本号则代表安装成功。

 第六步:
 进入到项目里来

 现在就开始下载啦~

 第七步:

在通过npm run dev 启动项目

紧接着在第六步的基础上进行 

加载之后:

 完了之后就会弹出页面

登录进去就会出现这个页面啦~

环境搭建成功~~~ 



二、Element简介

官方网址:Element - The world's most popular Vue UI framework 

 Element有两种开发模式,一种是传统开发模式,另一种是前后端分离开发模式。


知识总结

安装步骤:

1、下载nodeJS的安装包

2、解压nodeJS的解压包,在根目录下新增两个文件夹node_globalnode_cache

3、配置环境变量
        NODE_HOME:配置的是nodeJS解压的根路径F:\Software path\node-v10.15.3-win-x64
        Path:%NODE_HOME%;%NODE_HOME%\node_global

        检验是否配置成功:node -v

4、配置npm的全局模块的下载地址
        npm config set cache "F:\Software path\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "F:\Software path\node-v10.15.3-win-x64\node_global"
        npm config set registry https://registry.npm.taobao.org/

        检验是否配置成功:本机用户找到.npmrc文件,查看是否有以上三行脚本

5、下载github的Vue的项目解压

        检验是否安装成功:npm -v

6、在解压的项目中是没有node_modules的,在工程的根目录下需要通过doc命令npm install进行再次依赖下载(package.json)

7、在通过npm run dev 启动项目

今日分享内容到此结束,希望对您有所帮助喔~

预告下期内容:【搭建SPA项目】

我们下期再见!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端学习之HTML

目录 1. 什么是HTML? 2. HTML专业的开发工具有哪些? 3. 是谁制定了HTML? 4. HTML的简单特性 5. 基本标签的介绍 6. 表格 7. 表格中单元格的合并 8. 背景颜色和背景图片 9. 图片 10. 超链接 11.列表 12. Form表单*** 1. 什么是HTML&#xff1f…

vue3版本网页小游戏

目录 1.前言 2.实现过程 2.1目录 2.2文件介绍 3.核心逻辑分步骤详解 4.总结 1.前言 最近火爆全网的羊了个羊小程序,背景是根据官方介绍,“羊了个羊”是一款闯关消除小游戏,通关率不到0.1%。主要玩法为重叠的各类方块,需要在…

CSS选择器(nth-child)

:nth-child()这个选择符括号内可以写/- an b (a,b均为整数)或者关键字 因为工作中有遇到要隐藏列表第三个子元素之后的所有子元素,所以有用到这个选择器,记录一下 (1) nth-child(a) 当括号里只写一个数字&#xff…

元素垂直居中的五种方式

元素内容垂直居中 本文介绍: 元素标签内的内容垂直居中有两种思路, 第一种思路是将元素内容利用行高或者内边距padding属性设置 第二种思路是子盒子在父盒子中垂直居中,利用flex布局或者position定位方式 五种方式实现元素内容垂直居中第一种…

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)

前言 最近在写 echarts 的时候碰到了这么一个报错,如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化,下面几种方法是经本人自测最有效的解决方案。 报错截图 解决方案: 1. this.$nextTick 该方法思路是将回调延迟…

Vue|样式绑定

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。 文末名片获取源码 精…

【vue 组件化开发 一 】组件基本使用、全局和局部组件、父组件和子组件的区别

目录 前言: 完整内容请关注: 一、组件的基本使用 二、全局组件和局部组件 全局注册,通过 Vue.component 局部注册,通过 components:{} 全局组件 局部组件 三、父组件和子组件的区别 前言: 完整内容请关注&am…

vue2中使用axios,以及axios拦截器的配置

目录 一、vue2项目中如何实现异步请求 1、axios:是一个基于Promise的网络请求库。既可以在node.js(服务器端)使用,也可以在浏览器端使用 2、vue中的使用方法 ​ (2)引用方法: ​ A、原生的…

HTML侧边导航栏

HTML侧边导航栏 简介&#xff1a;本文用最简洁的语言&#xff0c;来教会读者&#xff0c;如果用htmlcss来制作&#xff0c;侧边导航栏&#xff0c;本案例以手机商城中的部分为例子来制作。 第一步&#xff1a;构建框架 <body><!-- 首先确定导航栏中的内容 每个内容…

【vue 项目】el-upload 上传文件以及回显照片和下载文件

本次需求是上传多种固定格式的文件&#xff0c;且回显的时候&#xff0c;图片可以正常显示&#xff0c;文件可以进行下载 主要采用element的el-upload组件实现 1、文件上传 先看下&#xff0c;上传文件效果图 点击上传将文件放到网页&#xff0c;还有一个点击确定的按钮再上传…

猿创征文|【Typescript入门】常用数据类型(3)

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

Vue项目中的接口调用

在企业开发过程中&#xff0c;往往有着明确的前后端的分工&#xff0c;前端负责接收、使用接口&#xff0c;后端负责编写、处理接口。 对于前端如何使用接口&#xff0c;今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中在src文件夹中&#xff0c;&#xff0c;有这…

windows系统完全卸载并重装Node(亲测可用)

windows系统完全卸载并重装Node(亲测可用) 完成上述6步之后开始重新下载配置Node 根据自己的需要下载对应版本即可 安装完成查看 查看是否安装成功 A、node -v 查看 node 版本 B、npm -v 查看 npm 版本 2、安装完成后&#xff0c;文件目录如下图 如果 npx 为 5.2.0&#xf…

第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴

文章目录1&#xff1a;网页PPT (5分) ✔✔✔2&#xff1a;蓝桥校园一卡通 &#xff08;10分&#xff09;✔✔✔3&#xff1a;心愿便利贴 (15分) ✔✔✔1&#xff1a;网页PPT (5分) ✔✔✔ switchPage( ) switchPage( ){ if(activeIndex 0 ){$(".btn.left").addClas…

浅谈vue中的$含义及其用法($xxx引用的位置)

看了各个帖子的描述&#xff0c;还是未能参透$在vue中所想发挥的本意&#xff0c;将一些一知半解的理解摘抄下来&#xff0c;顺带附上自己常见的用法&#xff0c;以加深理解和记忆。 摘抄 这些只是Vue的命名规则&#xff0c;为了区分普通变量属性&#xff0c;避免我们自己声明…

前端开发一枚,入职前自学的感觉不难,为什么工作起来很吃力?

前言 我是软件工程专业&#xff0c;学前端之前&#xff0c;学过 C/C、Java、PHP、.net 成绩还不错基本都是90多分。感觉自己干后端也不吃力。实验室里面的项目都是前后都写。最爱 PHP&#xff0c;本以为以后就走上PHP后端工程师的道路了。 由于项目需要的原因&#xff0c;后来…

关于我的家乡html网页设计完整版,10个以家乡为主题的网页设计与实现

&#x1f4c2;文章目录​​二、&#x1f4da;网站介绍​​​​三、&#x1f517;网站效果​​​​▶️1.视频演示​​​​&#x1f9e9; 2.图片演示​​​​四、&#x1f492; 网站代码​​​​&#x1f9f1;HTML结构代码​​​​&#x1f3e0;CSS样式代码​​​​五、&#x1…

Vue中实现自定义excel下载

最近在工作中遇到一个需求&#xff0c;就是需要在前端实现一个错误模板Excel的下载功能。 实现下载有两种方式&#xff0c;一种是后端生成一个excel&#xff0c;放在服务器指定目录下&#xff0c;然后前端直接去后端拿。第二种是后端传给前端一个json的list&#xff0c;前端用…

vue 中使用自定义字体

1.先下载字体 2.在新建的font.css文件中加入下面代码引入字体 font-face { font-family: MSYH; src: url(阿里巴巴普惠体 L.ttf); font-weight: normal; font-style: normal; } font-face { font-family: HY; src: url(汉仪天宇风行体W.ttf); font-weight: normal; f…

React Hooks概述及常用的Hooks介绍

React Hooks概述及常用的Hooks介绍1 为什么会有Hooks2 Hooks的含义3 Hooks的用法3.1 useState()&#xff1a;状态钩子3.2 useEffect()&#xff1a;副作用钩子3.3 useCallback()&#xff1a;记忆函数3.4 useMemo()&#xff1a;记忆组件3.5 useRef()&#xff1a;保存引用值3.6 us…