筆者最近在進行前端的學習，在點完了HTML5、CSS3、JavaScript等技能樹之後，是時候開始框架的學習了。目前為止前端框架呈現出React、Angular、Vue三足鼎立的局面，在這三種框架中，Vue最為簡單，使用場景最為廣泛，因此筆者從Vue開始學習，但是發現網上能搜到的Vue安裝教程均不全面，所以寫出此篇供大家學習。

大致步驟

• 安裝Node.js
• 安裝Vue.js
• 安裝Webpack

Step1: 安裝Node.js

Node.js是一個Javascript執行環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引 擎執行Javascript的速度非常快，效能非常好。Node.js對一些特殊用例進行了優化，提供了替代的API，使得V8在非瀏覽器環境下執行得更好。

Node.js是一個基於Chrome JavaScript執行時建立的平臺， 用於方便地搭建響應速度快、易於擴充套件的網路應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分散式裝置上執行資料密集型的實時應用。

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。後續安裝都依賴於npm命令(筆者注)。

1. 下載完成後直接安裝，選擇預設路徑，Windows還是比較方便的，這時候請注意，其他教程都有設定Path的步驟，其實你可以不設定，因為Windows下安裝的時候預設有add to Path功能。
2. Win + R開啟cmd，然後輸入node --version
   看到版本資訊說明安裝成功，接下來輸入npm install node安裝node的二進位制檔案，這可能耗費一點時間。

Step 2: 安裝Vue.js

首先使用淘寶的映象升級npm，使其可以使用cnpm命令(單純的npm可能由於網路長城因而速度受限)。

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

2. 安裝Vue
   cnpm install vue

3. 安裝Vue官方提供的命令列工具
   cnpm install -g vue-cli

Step3: 安裝webpack

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript、JSX等），並將其打包為合適的格式以供瀏覽器使用。

1. 安裝WebPack
   cnpm install webpack -g

2. 在合適位置新建一個資料夾，命名為Vue-Demo，點進資料夾，右鍵git bash here。(如果沒有安裝Git你需要手動在cmd中cd進這個目錄)

3. 使用vue init webpack vue-test建立一個示例目錄,回車下一步，遇到選擇都選n。

4. cd vue-test進入這個目錄,遇到命令列介面卡死，可以滑鼠點進這個目錄，然後git bash here。(如果沒有安裝Git你需要手動在cmd中cd進這個目錄)

5. cnpm install安裝依賴

6. cnpm run dev

7. 瀏覽器輸入localhost:8080看到Vue介面證明所有步驟均成功。