Windows10安裝node.js，vue.js以及建立第一個vue.js項目

【工具官網】

Node.js : http://nodejs.cn/

淘寶NPM: https://npm.taobao.org/

1、安裝環境

一、本機系統：Windows 10 Pro（64位）
二、Node.js：v6.9.2LTS（64位）

2、安裝Node.js步驟

一、下載對應你係統的Node.js版本:https://nodejs.org/en/download/
二、選安裝目錄進行安裝
三、環境配置
四、測試

3、前期準備

一、Node.js簡介
簡單的說 Node.js 就是運行在服務端的 JavaScript。Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
二、下載Node.js
打開官網下載連接:https://nodejs.org/en/download/ 我這裏下載的是node-v6.9.2-x64.msi,以下圖：

4、開始安裝

一、下載完成後，雙擊「node-v6.9.2-x64.msi」，開始安裝Node.js

點擊【Next】按鈕

勾選複選框，點擊【Next】按鈕

修改好目錄後，點擊【Next】按鈕

安裝完後點擊【Finish】按鈕完成安裝

至此Node.js已經安裝完成，能夠先進行下簡單的測試安裝是否成功了，後面還要進行環境配置
在鍵盤按下【win+R】鍵，輸入cmd，而後回車，打開cmd窗口

安裝完後的目錄以下圖所示：

此處說明下：新版的Node.js已自帶npm，安裝Node.js時會一塊兒安裝，npm的做用就是對Node.js依賴的包進行管理，也能夠理解爲用來安裝/卸載Node.js須要裝的東西

5、環境配置

說明：這裏的環境配置主要配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑，之因此要配置，是由於之後在執行相似：npm install express [-g] （後面的可選參數-g，g表明global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，佔C盤空間。
例如：我但願將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中，則在我安裝的文件夾【D:\Develop\nodejs】下建立兩個文件夾【node_global】及【node_cache】以下圖：

建立完兩個空文件夾以後，打開cmd命令窗口，輸入

npm config set prefix "D:\Develop\nodejs\node_global" npm config set cache "D:\Develop\nodejs\node_cache"

接下來設置環境變量，關閉cmd窗口，「個人電腦」-右鍵-「屬性」-「高級系統設置」-「高級」-「環境變量」

進入環境變量對話框，在【系統變量】下新建【NODE_PATH】，輸入【D:\Develop\nodejs\node_global\node_modules】，將【用戶變量】下的【Path】修改成【D:\Develop\nodejs\node_global】

6、測試

配置完後，安裝個module測試下，咱們就安裝最經常使用的express模塊，打開cmd窗口，
輸入以下命令進行模塊的全局安裝：

npm install express -g # -g是全局安裝的意思 （注：「-g」這個參數意思是裝到global目錄下，也就是上面說設置的「D:\Program Files\nodejs\node_global」裏面。）

安裝完畢後能夠看到.\node_global\node_modules\express 已經有內容

在命令行輸入node進入編輯模式，輸入如下代碼測試是否能正常加載模塊：

　　require('express')

假設成功，能夠看到有輸出。假設出錯，檢查NODE_PATH的路徑。

 

七：安裝淘寶npm（cnpm）

1.安裝cnpm

   (1)輸入如下命令

　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　

   (2)輸入cnpm -v輸入是否正常，這裏確定會出錯。

　　cnpm -v

　　安裝結果以下：

　　

 

   (3)添加系統變量path的內容

　　由於cnpm會被安裝到　　D:\Develop\nodejs\node_global　　下，而系統變量path並未包含該路徑。在系統變量path下添加該路徑便可正常使用cnpm。

 

八.安裝webpack

　　cnpm install -g webpack

　　結果以下爲安裝成功

　　

九.安裝vue

　　cnpm install vue

　　結果以下爲安裝成功

　　

10.安裝 vue-cli

　　cnpm install -g vue-cli

　　結果以下爲安裝成功

　　　

 

十一.至此，已經完成環境搭建，能夠開始項目初始化。

1.在cmd裏用cd命令跳轉到指定地址，項目初始化命令：vue init webpack vue-projectname。projectname--項目文件夾的名稱(名字不能用中文)，這個vue-projectname文件夾會自動生成在你跳轉到的工做目錄中。

vue init webpack vue-projectname

注意：安裝過程當中，須要自行輸入項目名稱，描述，做者等等，即上圖中的？後面的答案。

2.cd到咱們的項目文件夾d:\Vue\vue-test中，運行命令cnpm install 安裝包。

cnmp install

3.測試項目是否安裝成功。

cnpm run dev

*:若是出現安裝失敗，大部分是沒有在管理員命令執行相應指令安裝

 

參考文獻：https://www.cnblogs.com/zhouyu2017/p/6485265.html

　　　　    https://www.cnblogs.com/yominhi/p/7039795.html

　　　　    https://www.cnblogs.com/riddly/p/7857710.html