在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