在Windows下学习Nodejs、Npm和VUE

前言

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

Node.js学习

什么是Node.js

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命令后，会启动一个服务器。

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

注：此文章为原创，任何形式的转载都请联系做者得到受权并注明出处！
若您以为这篇文章还不错，请点击下方的【推荐】，很是感谢！

http://www.javashuo.com/article/p-kbycfzlh-gm.html