1. 背景
Vue工程化項目環境配置還是比較麻煩的，本篇來詳細的記錄下從0開始的安裝、建構、打包、運作全過程。
2. 整體步驟
第一，安裝Node.js，這個是前端工程化項目運作的基礎環境。
第二，安裝Vue，使我們前端開發環境可以支援Vue開發。
第三，安裝Vue CLI,這是Vue提供的互動時的項目腳手架，有點難了解是吧，其實就是一個快速建構Vue工程的小工具，通過Vue CLI，開發人員可以使用指令行或者可視化界面快速建構Vue工程項目。
第四，我們通過Vue CLI提供的可視化工具來建構一個Vue工程。
第五，我們運作建構的Vue工程。
第六，我們将Vue項目打包，并部署到web伺服器上運作。
3. 詳細過程
3.1 安裝Node.js
官網下載下傳.msi格式安裝包，下載下傳連結，此處由于是64位計算機，是以選擇如下。
下載下傳完成後輕按兩下安裝檔案，開始安裝，大部分直接點選下一步即可，需要注意的此處我給出提示。
首先是安裝位置，最好安裝到D盤，避免C槽占滿了。
然後其餘的全部點選下一步，等待安裝完成。
安裝node.js完成後，可以打開指令行，輸入
node -v
3.3 安裝Vue CLI
由于Vue CLI安裝時間比較長，此處建議先安裝cnpm，輸入指令npm install -g cnpm --registry=http://registry.npm.taobao.org後回車。此處cnpm可以被認為是npm的國内鏡像，後續執行指令時可以将npm替換為cnpm加速安裝。出現如下圖所示，則安裝cnpm完成。
3.4 建立Vue工程
打開指令行，輸入vue ui打開圖形化界面，如下圖即為用于建立、管理Vue項目的可視化界面。
設部分，我們選擇手動配置。
功能部分，我們一般選擇Router路由、Vuex狀态管理、CSS Pre-processor預處理幾項即可。
在配置部分，選擇啟用history mode，然後預處理器選擇Sass即可。
此時點選建立項目，即可安裝我們的配置建立一個Vue工程項目了，注意後面還有一個預設部分，我們此處點選
建立項目不儲存預設
即可。
等待出現如下界面，項目建立完成：
3.5 運作項目
此時我們可以通過可視化界面運作工程，依次點選任務-serve-運作-啟動app即可運作項目了。
這種方式比較麻煩，一般我們使用vue ui指令打開可視化界面并建立項目後，就可以關掉可視化界面并退出指令行了。然後我們通過cmd切換到項目路徑下，運作’npm run serve’即可啟動項目，如下圖：
當項目啟動後，指令行會顯示通路位址，通過位址直接通路項目即可。
3.6 打包部署項目
在指令行中切換到vue-demo項目路徑下，運作npm run build即可将項目打包。
注意打包的意義，在打包前，項目隻能在node.js環境下調試運作，打包後，可以部署到tomcat或者iis或者niginx等web伺服器運作。
打包完成後，在vue-demo路徑下的dist檔案夾即為打包結果，将dist檔案夾拷貝到web伺服器相應目錄下運作即可。
4. 總結
node.js vue vue cli這3個安裝一次即可。
vue ui可視化界面，每次建立項目時使用一次即可。
後續可以直接使用指令行npm run serve進行啟動調試。