原文來源：https://www.jianshu.com/p/0c6678671635
1：安裝node
端開發架構和環境都是需要 Node.js ，先安裝node.js開發環境，vue的運作是要依賴于node的npm的管理工具來實作，下載下傳https://nodejs.org/en/，安裝完成之後，打開cmd開始輸入指令。（我用的是win10系統，是以需要管理者權限，右鍵點選以管理者身份運作cmd），不然會出現很多報錯。
圖檔.png
2：檢視node的版本号
下載下傳好node之後，以管理者身份打開cmd管理工具，，輸入 node -v ，回車，檢視node版本号，出現版本号則說明安裝成功。
輸入指令： node -v
圖檔.png
3：安裝淘寶npm鏡像
由于npm是國外的，使用起來比較慢，我們這裡使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm指令管理工具可以代替預設的npm管理工具。
輸入指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
圖檔.png
4：安裝全局vue-cli腳手架
淘寶鏡像安裝成功之後，我們就可以全局vue-cli腳手架，輸入指令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在指令輸入vue，出來vue的資訊，及說明安裝成功；
輸入指令：cnpm install --global vue-cli
圖檔.png
5：建一個新項目
搭建完手腳架之後，我們要開始建一個新項目，這個時候我建議，盡量不要裝在C槽，因為vue下載下傳下來的檔案比較大，如果要改盤的話，直接輸入D：回車就可以直接改盤
輸入指令：vue init webpack my-project-first
回車，my-project-first是我自己的檔案夾的名字，是基于webpack的項目，輸入之後就一直回車，直到出現是否要安裝vue-route，
這個我們在項目要用到，是以就輸入y 回車
圖檔.png
6：注意
下面會出現是否需要js文法檢測，這個我們暫時用不到，就可以直接輸入no，後面的都可以直接輸入no，都是我們暫時用不到的
圖檔.png
建立完成之後的提示：
圖檔.png
打開D盤檢視一下，會發現多了一個剛剛建立的檔案夾
圖檔.png
7：進入項目檔案夾
檔案夾已經下載下傳好了，現在就可以進入檔案夾，輸入： cd my-project-first 回車進入建立的項目。
輸入指令：cd my-project-first
8：在項目裡安裝依賴
因為各個模闆之間都是互相依賴的，是以現在我們要安裝依賴，在項目裡輸入以下指令。
輸入指令：cnpm install
圖檔.png
9：運作
一切環境依賴安裝準備就緒，我們來測試一下自己建立的vue項目的運作情況，輸入指令：cnpm run dev直接回車。會彈出一個浏覽器通路位址預設為localhost:8080。（我将位址修改為8081進行通路）
輸入指令：cnpm run dev
圖檔.png
10：在浏覽器輸入localhost:8081
8080是預設的端口，要通路的話，直接在浏覽器輸入localhost:8080就可以打開預設的模闆了；（我的電腦上8080端口有需要，被另外一個項目占用，故而使用8081的端口）
在浏覽器輸入localhost:8081，顯示如下，到此為止，vue開發環境搭建完畢。
圖檔.png
但是在最後一步的時候，有些人會遇到這樣的報錯：
圖檔.png
圖檔.png
不要着急，我也遇到過這樣的情況，總結了一個非常完美的解決方案。
解決方案：
1：在項目裡執行這樣的指令
npm i prettier@~1.12.0
圖檔.png
:2：重新開啟運作即可成功：
npm run dev
圖檔.png
最後如何修改預設的端口？
既然提到自己修改了預設的端口，那就說明一下。根目錄下有一個config檔案夾，看名字就知道與配置有關，打開config目錄下的index.js，這裡不僅可以改變端口，還可以根據需要改變其他配置資訊。