Windows10安裝node.js,vue.js以及創建第一個vue.js項目


【工具官網】

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

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

一、安裝環境

1、本機系統:Windows 10 Pro(64位)
2、Node.js:v6.9.2LTS(64位)

二、安裝Node.js步驟

1、下載對應你系統的Node.js版本:https://nodejs.org/en/download/
2、選安裝目錄進行安裝
3、環境配置
4、測試

三、前期准備

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

四、開始安裝

1、下載完成后,雙擊“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需要裝的東西

五、環境配置

說明:這里的環境配置主要配置的是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】

六、測試

配置完后,安裝個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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM