現在的Vue腳手架已經升級到3.x版本，即vue-cli3。 腳手架升級之後，安裝的命令發生了變化，所以這篇文章會跟大家演示新舊版本的腳手架安裝過程。 下面的安裝過程均是在window平臺下安裝。

一、準備工作

1. 安裝node.js和npm

Vue的腳手架是依賴於node.js的，所以無論是安裝新版本還是舊版本，我們都要安裝node.js，如果你對node.js不熟悉的話，大家可以檢視我之前的一篇文章：Vue筆記——node.js入門知識，簡要了解一下。

我們可以直接到node.js官網下載，然後像安裝普通軟體一樣安裝node.js。

npm(node package manager)是node的包管理工具，我們在後面主要是使用npm來搭建腳手架和安裝一些常用的元件。如果你想簡要了解一下npm，推薦大家檢視我之前的一篇文章：

node.js成功安裝之後，npm一併安裝成功，這個時候我們可以開啟cmd視窗，輸入 node -v 和 npm -v 來檢視node.js和npm的版本，如果能夠顯示出版本，說明已經安裝成功。

2.安裝淘寶映象

為什麼要安裝淘寶映象呢？因為我們使用npm來搭建腳手架的時候，是從國外的npm伺服器上下載需要的檔案，這就導致下載過程會很漫長。我們安裝了淘寶映象之後，就可以從國內的映象伺服器下載搭建腳手架所需的檔案，可以很快的完成下載任務。

我們在cmd視窗中輸入以下命令來安裝淘寶映象。安裝完成之後，我們可以使用命令**cnpm -v**來檢視其版本，如果能夠顯示版本說明安裝成功。

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

完成之後，我們就可以用cnpm命令代替npm命令來安裝依賴包了。如果想進一步瞭解cnpm的，檢視淘寶npm映象官網。

二、安裝舊版本腳手架

使用以下程式碼在全域性下來安裝webpack和vue-cli，因為vue腳手架搭建的專案是依賴webpack的，所以一定要安裝webpack。

cnpm install webpack -g

cnpm install -g vue-cli

安裝完成之後，我們可以使用vue -V和webpack -v命令來檢視兩者的版本，如果成功顯示版本號，說明已經安裝成功，注意vue -V

三、安裝新版本腳手架（即vue-cli3.x）

在安裝新版本的腳手架之前，如果我們安裝過舊版本的腳手架，那麼我們需要使用npm uninstall vue-cli -g命令刪除舊版本的腳手架。

安裝新版本的Vue腳手架，最好保證node.js的版本在8.1.1.0以上，如果你是最近從node官網下載的node，那麼無需關心這個問題，node版本會在8.1.1.0以上。

準備妥當之後，我們可以使用cnpm install -g @vue/cli或yarn global add @vue/cli來安裝新版本的腳手架。安裝完成之後，我們可以vue --version或vue -V命令來檢視我們安裝的版本。

新版腳手架安裝完成之後，我們要檢查一下webpack是否已經安裝，如果沒有安裝，我們要使用cnpm install webpack -g命令來安裝webpack。

到目前為止，我們已經成功搭建了Vue腳手架，即成功搭建了vue-cli。 希望大家不要把腳手架和通過腳手架建立的Vue專案搞混淆。 我們上面的工作是搭建Vue腳手架，我們下面的工作才是使用搭建好的腳手架，快速建立我們的Vue專案。

四、使用vue-cli搭建Vue專案

現在，我們就分別成功安裝了舊版本和新版本的vue腳手架，下面我們就可以使用腳手架vue-cli來快速建立vue專案了。

首先我們在電腦的合適位置新建一個資料夾，然後使用cd命令來到這個資料夾。比如我在自己的D盤下新建一個fengzhen資料夾。

來到這個資料夾之後，使用vue init webpack my-app命令來初始化我們的vue專案。

解釋一下這個命令，這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中my-app是整個專案資料夾的名稱，這個資料夾會自動生成在你指定的目錄中。注意這裡的專案名稱不要使用大寫字母。

輸入完**vue init webpack my-app命令之後，命令列視窗還會相繼給出幾個選項，是讓我們重新確定我們專案的名稱、專案描述、專案作者以及是否要安裝一些元件等資訊。專案的名稱、專案描述、專案作者大家可以根據實際情況進行設定。是否安裝一些元件，建議大家選擇no，專案後期需要安裝什麼元件，我們到時候再進行安裝即可。

這些東西都搞定之後，腳手架就會開始下載檔案，這個過程可能會出現一些【WRAN】警告資訊，但是一般情況下是沒有什麼影響的，只要是出現在這些資訊，就說明我們的專案已經搭建完成了。

這個時候我們就可以根據上圖中紅框中的兩條命令，來開啟我們的專案。專案開啟的過程中，會進行載入和解析，這個過程需要等待一會，等到出現這樣的資訊，說明我們的專案已經成功開啟。

這個時候我們從瀏覽器中開啟地址：http://localhost:8080，就可以看到我們的快速搭建的Vue專案啦。

到這裡，我們就已經成功使用vue腳手架快速搭建了我們的Vue專案，最後再來看一眼我們的專案資料夾，裡面與很多檔案，這就是vue腳手架自動幫我們下載的專案檔案了。在這些檔案的基礎之上，我們就可以快速上手進行開發了。