接上篇《1.入門介紹：Vue解決了什麼痛點？》
上一篇我們介紹了整個前端的技術棧情況，以及對Vue進行的基本介紹和其優點和特色，本篇我們來搭建Vue的運行環境，並構建一個官方實例工程運行。
我們登錄Vue的官網https://cn.vuejs.org，可以看到Vue的起步按鈕，其三個特色也在首頁進行了標明：
一、搭建Vue的開發環境
在使用Vue之前，我們首先要搭建Vue的環境，我們點擊上面的“起步”按鈕，進步基礎教程頁面：
我們點擊左側樹形菜單的“安裝”，進入Vue的安裝教程頁面，一般搭建Vue環境有兩種模式，一種模式是“直接用 <script> 引入”（像第一篇我們寫的兩個例子一樣），另一種方式是使用腳手架來搭建Vue環境，這裏我們詳細講解一下第二種模式。
1、安裝Node.js
因爲搭建Vue的工具的命令行是需要Node.js支持的，所以我們首先要安裝Node.js。安裝Node服務組件的詳細步驟見https://www.runoob.com/nodejs/nodejs-install-setup.html，這裏不再贅述。
安裝完成之後，在cmd窗口中輸入“node --version”可以看到Node的版本時，Node環境就安裝成功了：
注：隨同NodeJS一起安裝的還有一個NPM包管理工具，是後面我們構建環境需要的很重要的安裝包工具。
2、安裝Vue的命令行工具（腳手架工具）
Vue提供了一個官方的腳手架工具，這個工具可以快速搭建單頁面應用的環境，通過這個腳手架工具構建出來的工程，帶有熱重載、保存時lint校驗，以及生產環境可用的效果。
安裝腳手架工具，我們需要用到npm，npm是JavaScript世界的包管理工具,並且是Node.js平臺的默認包管理工具。通過npm可以安裝、共享、分發代碼，管理項目依賴關係。後端的同學，可以理解爲npm像是maven一樣。
打開cmd，通過以下指令下載Vue的腳手架工具：
npm install --global vue-cli
運行後我們可以看到在從遠程倉庫中下載Vue命令行工具：
安裝完成之後，我們就可以在cmd中使用Vue的命令了。
二、構建並運行一個項目
1、構建一個測試工程
然後我在D盤中設置了一個“vue-cli”的文件夾，準備在裏面生成一個名爲“vue-demo01”的vue項目，指令如下：
vue init webpack vue-demo01
在安裝過程中，需要設置一些參數，如下：
前三個分別是定義即將構建的工程的名稱、描述以及作者信息，然後提示是否安裝vue-router，這裏選擇Y，這個具體是什麼，我們後面來講解。然後就是會否使用EsLint，它是一個語法檢查工具，這裏我們選擇N，因爲一旦我們輸入語法有問題，它都會報錯，在開發熟練的情況下，爲了提高效率就不選擇它。剩下的創建測試環境、測試運行等直接回車即可。
注：如果webpack安裝出現SyntaxError:Block-scopeddeclarations錯誤，是因爲Node版本過低導致的，需要更新，具體操作參照：https://blog.csdn.net/qwdafedv/article/details/58048935
如果在構建中出現了錯誤，在該工程目錄下再執行一下“npm install”。
安裝完畢之後，會在相應盤符下得到一個結構完整的工程樣例，結構如下：
2、運行構建的工程
然後我們在命令行打開這個工程的目錄，執行npm的run命令，這裏運行模式爲dev開發模式：
npm run dev
可以看到項目跑起來了，默認運行在8080端口。
我們在瀏覽器中輸入“ http://localhost:8080”，即可查看到剛剛我們構建的樣例工程的主頁面：
這裏我們使用代碼編輯器（這裏我用的是Hbuilder），打開工程的目錄：
我們修改一下App.vue，在上面加上一句“你好！Vue”：
然後保存該文件，不用刷新剛剛的頁面，寫的字符就自動出現了：
至此我們完成了Vue環境的搭建，以及使用腳手架生成一個工程的操作。下一篇我們對生成的工程進行目錄結構分析，進行一些基本語法的講解。
參考：
《IT營：itying.com-2018年Vue2.x 5小時入門視頻教程》
轉載請註明出處：https://blog.csdn.net/acmman/article/details/106882178