一、vue介紹

vue是一個用來構建使用者介面的框架，vue只專注於檢視層，屬於主流的MVVM前端框架，關於MVVM的具體介紹不在本章討論範圍之內。它很方便的與現有的第三方元件庫或現有專案進行整合，另外vue提供各種腳手架模組來方便專案的開發，本章講解的vue-cli就是其中之一。

二、vue-cli介紹

vue-cli是vue提供的一款腳手架，集成了webpack環境及主要的依賴，對於專案的搭建、打包、維護等都非常方便快捷。它的特點有：

1、有一套成熟的vue專案架構設計，能夠快速初始化一個vue專案。

2、vue-cli是官方支援的一個腳手架，維護性比較好。

3、vue-cli提供了一套本地的node測試伺服器，使用vue-cli自己提供的命令，就可以啟動伺服器。

4、整合打包上線方案。

5、還有一些優點，包括：模組化，轉譯，預處理，熱載入，靜態檢測和自動化測試等，等大家深入使用下去就會發現vue-cli的強大之處。

三、開始

1、安裝nodejs

在nodejs官網下載最新版本的nodejs，需要選擇4.0以上版本。安裝完成之後輸入node -v檢視安裝是否成功。

如果本機已經安裝老版本的nodejs，建議安裝nvm或者n模組進行切換node版本，具體的nvm的使用自行搜尋。

2、配置淘寶npm映象

由於需要通過npm下載各種模組，預設npm是從國處伺服器下載，對於網路條件一般的使用者可能很難下載成功，所以需要配置成淘寶的映象。

以後下載模組會自動從淘寶地址進行下載。

3、安裝webpack

開啟命令列，輸入npm install webpack -g。安裝完成後輸入webpack -v，如果顯示版本號，則說明安裝成功。

4、安裝vue-cli

開啟命令列，輸入npm install vue-cli -g。安裝完成後輸入vue -V檢視版本事情，現在應該是2.8.2版本。

5、通過vue-cli初始化專案

開啟命令列，進入指定的目錄，輸入vue init webpack 專案名，一路回車即可

成功之後如圖：

6、安裝依賴

專案建好之後還不能執行，因為還需要安裝各種依賴，進入專案目錄中，在命令列輸入npm install -d即可，安裝依賴需要大概3~5分鐘。至此通過vue-cli構建專案成功，專案目錄結構如下：

7、啟動專案

在命令列中輸入npm run dev啟動服務，啟動完成後會預設開啟一個歡迎頁面，預設埠是8080，如圖：

8、結束

至止整個構建、安裝、執行過程已經完成，如果大家在過程中出現錯誤，一般需要檢查本地nodejs的版本是不是比較新的版本，另外檢查網路聯通情況，大部分可能在npm install webpack和npm install這兩個步驟會出現錯誤，具體錯誤大家可以在網上搜索。接下來的文章會主要介紹使用vue來開發專案。