目錄

• 一、node.安裝以及環境配置
• 1、下載.js
• 2、安裝node.js
• 3、檢查node程式是否安裝成功
• 4、更改預設路徑
• 5、新增環境變數
• 5、測試安裝是否成功
• 二、安裝vue-cli腳手架
• 1、檢查node環境是否安裝好
• 2、更改淘寶映象下定製的cnpm(gzip 壓縮支援) 命令列工具代替預設的npm
• 3、開始安裝vue-cli
• 4、生成專案
• 5、打包上線
• 總結

一、node.js安裝以及環境配置

1、下載vue.js

下載地址：

https://nodejs.org/en/

2、安裝node.js

下載完成後，雙擊安裝包開始安裝。安裝地址最好換成自己指定的地址。

這一步根據自己的需要進行選擇，我這裡就選的是第一個。網上有些教程說要選中第4個，我這裡是要後期需要更換全域性模組所在的路徑，以及快取cache的路徑的，所以在後期需要自己重新配置環境變數。

這一步我沒選，直接進行下一步，一直下一步，剩下的都是安裝了。

安裝完成之後，node啟動程式會自動新增到系統環境變數path中，這裡可自行去檢視。

3、檢查node程式是否安裝成功

開啟cmd視窗輸入node -v 和 npm -v檢視node版本和npm版本。如果版本號都能出來，代表安裝成功了

在預設下載全域性包時，這個包的路徑是放在我c盤下面的，大家可以輸入指令 npm root -g 進行檢視，我這裡已經更換了目錄，所以不在c盤。接下里就來教大家如何更改

4、更改預設路徑

這裡主要是配置的是npm安裝的全域性模組所在的路徑，以及快取cache的路徑。因為以後在執行類似：npm install express [-g] 的安裝語句時，會將安裝的模組安裝到C盤的路徑中，佔用C盤空間，所以才進行的配置，如果C盤容量足夠，可省略這一步，不影響node使用。

開啟自己剛剛安裝的node目錄

在目錄下新建兩個資料夾【node_global】和【node_cache 】資料夾

再次再次開啟cmd命令視窗，輸入npm config set prefix “你的路徑\node_global”（你的路徑”預設安裝的情況下為 C:\Program Files\nodejs）

npm config set cache “你的路徑\node_cache” 可直接複製剛剛新建的空資料夾目錄

這裡記住了兩次的命令是不一樣的一個是 set prefix 一個是 sex cache ，大家不要為了省事兩次都直接複製貼上成同一個了

5、新增環境變數

點選下面系統變數裡的新建按鈕，新增變數名和變數值然後點選確定

“變數名”欄填寫：NODE_PATH（要大寫，HOME前有下劃線）

“變數值”欄填寫：D:\nodejs\node_global\node_modules （node的安裝地址）

找到系統變數中的Path然後點選編輯，新建兩個變數，然後確定。第一個是node_global資料夾目錄，第二是node安裝目錄

5、測試安裝是否成功

根據步驟3：開啟cmd輸入node -v 和 npm -v 檢視是否有版本號出現。以及輸入命令： npm root -g 檢視全域性模組的預設路徑是否已經改變。這裡不過多的介紹了。

二、安裝vue-cli腳手架

1、檢查node環境是否安裝好

開啟cmd輸入node -v 和 npm -v，如果能出現版本號，說明安裝成功，安裝成功才能進行下一步。

2、更改淘寶映象下定製的cnpm(gzip 壓縮支援) 命令列工具代替預設的npm

開啟cmd輸入如下命令：

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

如果安裝失敗，可以使用命令 ：npm cache clean --force 強制執行清理快取，然後再重新安裝。

安裝完成之後開啟cmd 輸入cnpm -v 檢視是否安裝成功，如果出現版本號代表安裝成功

3、開始安裝vue-cli

開啟cmd輸入如下指令安裝vue-cli

cnpm install -g vue-cli

最新的vue專案模組中，都帶有webpack外掛，所以這裡就可以不安裝webpack外掛。安裝完成後，可以使用 vue -V（注意V大寫）檢視是否安裝成功

如果出現版http://www.cppcns.com本號，則代表安裝成功，如果提示“無法識別 vue”，可以是npm版本過低，可以使用 npm install -g npm 來更新版本

4、生成專案

首先需要再命令列中進入到專案目錄，然後輸入：

vue init webpack demo1

其中webpack是面板名稱，demo1是自定義專案名稱，命令執行之後，會在當前目錄生成以該名稱命名的專案資料夾。配置完成後，可以看到目錄下多出了一個專案資料夾，裡面就是 vue-cli 建立的一個基於 webpack 的 vue.js 專案

然後進入專案目錄（cd Vue-Project），使用 cnpm 安裝依賴(注意要在有package.json 的目標下執行)

cnpm install

然後啟動專案（直接訪問埠號進入測試demo1）

npm run dev

然後開啟瀏覽器進入 localhost:8080，如果出現頁面則專案啟動成功。如果沒有加載出頁面，可能是本地8080埠被佔用，需要修改一下配置檔案 config>index.js

5、打包上線

自己的專案檔案都需要放在src資料夾下，專案開發完成之後可以輸入如下命令來進行打包工作。

npm run bui客棧ld

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以開啟本地檔案檢視，專案上線時，只需要將 dist 資料夾放到伺服器就行了。

總結

到此這篇關於node.js與vuecli腳手架下載安裝配置方法的文章就介紹到這了,更多相關node.jsvuecli腳手架下載安裝配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！