Windows学习Nodejs、Npm和VUE

本文从开发视角出发,介绍了Node.js的基础概念及其安装过程,通过创建简易服务器演示了Node.js的使用方法。随后,讲解了Npm作为JavaScript包管理器的功能,演示了如何使用Npm下载JQuery等库。最后,通过Npm安装Vue并创建Vue项目,展示了Vue作为前端框架的基本应用。
摘要由CSDN通过智能技术生成

前言

 本文主要以开发的角度讲解Node.js,Npm和Vue。

Node.js学习

什么是Node.js
老幺网 m.laoyao.org

Node.js简单来说就是一个IISExpress,提供一个前端Html的独立运行环境。

安装Node.js

首先进入官网下载安装包,官网下载地址:https://nodejs.org/en/download/

下载文件如下图:

安装非常简单,下一步即可。

注:Nodejs安装除了安装Nodejs,还会安装一个Npm,Npm类似于.Net中的Nuget。

安装完成后,环境变量的用户变量的Path中多了一个npm的地址,系统变量中多了一个nodejs的地址,如下图所示:

其中用户变量Path中的npm地址用于存储npm全局下载的js包;系统变量path中的nodejs地址是nodejs的安装目录,这个变量代表,我们在CMD的窗口中输入NodeJS和Npm的命令时,会检索这个地址中的文件的Main函数是否接收,如果接收,那么,就会运行命令内容,这样就实现了命令行控制。

现在我们用命令行测试一下是否安装成功,打开CMD,输入node -v和npm -v,如下图,安装成功。

使用Nodejs

上文提到nodejs是一个IISExpress,现在,我们就来运行下这个服务器。

新建一个文件夹NodeServer,用来做服务器目录。

然后打开cmd,cd到该目录,如cd/d c:/nodeserver。

然后创建一个server.js文件,内容如下:

var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
http.createServer( function (request, response) {  
   // 解析请求,包括文件名
   var pathname = url.parse(request.url).pathname;
   
   // 输出请求的文件名
   console.log("Request for " + pathname + " received.");
   
   // 从文件系统中读取请求的文件内容
   fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         console.log(err);
         // HTTP 状态码: 404 : NOT FOUND
         // Content Type: text/html
         response.writeHead(404, {'Content-Type': 'text/html'});
      }else{             
         // HTTP 状态码: 200 : OK
         // Content Type: text/html
         response.writeHead(200, {'Content-Type': 'text/html'});    
         
         // 响应文件内容
         response.write(data.toString());        
      }
      //  发送响应数据
      response.end();
   });   
}).listen(8080);
 
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:8080/');

然后在cmd窗口中输入node server.js,如下图:

接着我们在NodeServer文件夹下,创建一个Index.html,然后打开浏览器输入http://127.0.0.1:8080/index.html,如下图,访问成功,服务器建立成功。

到这来Nodejs就学习完了,而且也不需要再进一步学习了,虽然他还有很多内容,但不用去学了,对于开发没有用。

Npm学习

上文已提到,Npm是类似于.Net中Nuget的存在。也就是说,Npm主要是用来下载js文件的。

下面我们下载一个Jquery。

首先,我们还是cd到目录,如cd/d c:/nodejs,然后输入【npm i jquery -c】,-c代表下载到当前文件夹,如果是想下载到用户变量配置的全局目录,可以使用-g,操作如下图所示:

然后打开文件夹,里面多了一个文件和一个文件夹,如下图:

package-lock.json:用于存在下载的js文件包的信息,类似于.NET的packages.config。

node_modules:用于存在下载的js文件,其中文件夹内的dist存储对应的发布的js文件,dist对应英文distribution。

Vue学习

Vue是一个前端框架,因为我们前面已经学习了Npm,所以,这么我们直接使用Npm命令下载vue。

打开cmd窗口,依次输入如下命令:

npm i vue -g

npm i vue-cli -g

注:输入【npm i vue -g】下载vue时,尽量使用-g,因为vue的文件中有一些文件是可以执行vue开头的命令行的,因为-g是下载到环境变量配置的Path地址,所以如果下载到这里,那么vue开头的命令就可以在cmd窗口中直接使用了,不然还需要重新配置环境变量,添加当前下载目录。

下载完Vue后,我们使用vue开头的命令创建一个项目,在cmd窗口输入命令如下:

vue init webpack my-project

输入完命令后,会提示我们配置项目信息,可以一直回车使用默认配置,然后等待项目创建完成。

注:输入vue init webpack my-project后,不要切换窗口,一直回车,就可以创建成了,如果切换窗口了,切换回当前cmd窗口后,回车有时候无法直接输入,需要操作下才能输入,比如先按一下个上下左右键。

项目创建完成后,得到如下界面内容。

按照完成界面的提示,我们进行环境启动。

cd到项目的文件夹,然后在输入命令npm run dev,得到窗体如下:

然后打开浏览器,输入http://localhost:8080,vue项目运行成功,如下图:

注:vue自带了一个类似server.js的配置,所以运行npm run dev命令后,会启动一个服务器。

----------------------------------------------------------------------------------------------------

注:此文章为原创,任何形式的转载都请联系作者获得授权并注明出处!
若您觉得这篇文章还不错,请点击下方的推荐】,非常感谢!

https://www.cnblogs.com/kiba/p/12794928.html

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值