引言：
2013-2020年，這7年是web前端技術的一個高速發展期，也是前端開發崗位的考驗期。
在我接觸前端時，JQuery十分熱門，開發者從原生JS到JQ的應用，可以說是大大提高了開發效率，也被廣大前端所接受。
但事物發展的過程總是螺旋式上升、波浪式前進的。雖然JQuery有自己的一段輝煌歷史，但同樣面臨着被新事物取代的危機。
近幾年，前端三大框架的相繼出現，給前端開發者帶來了更加新穎的開發理念，web前端技術在短時間內也算進入了一個穩定期。
Vue作為三大框架之一，是國內市場的“領頭羊”，也是大勢所趨，學習Vue是前端開發者一定要做的事情。
本文就為大家帶來Vue腳手架構建項目的最簡單流程。（適合初學者或新接觸Vue框架的使用者）
開始：
1.裝環境：
注：node環境和全局vue環境這里不再贅述。
我們需要的環境很簡單，就是vue-cli，打開命令行輸入以下命令（注意：不是想當然的vue-cli）。
npm install @vue/cli -g
安裝成功后，輸入以下命令：
vue ui
就會從瀏覽器打開Vue的項目管理器，接下來進行可視化操作。
在“創建欄”，點擊最下邊的綠色按鈕，“創建新項目”。
在這里，我給項目起名為“mypro”，大家可以隨意取合法的名字。
下邊的包管理器，我用的npm，用yarn的小伙伴也可以自行選擇。
初始化git倉庫，按推薦選擇吧。（若沒有上傳代碼的想法，一般情況下用不到）
選擇好了，就可以點擊“下一步”。
到了“預設”，這里建議大家手動配置項目。（按需配置）
手動配置后，我們有各種選擇，下圖有詳細說明：
選好之后“下一步”，出現再配置的步驟。
1.第一個選項，默認是哈希模式，若選上就是歷史模式。（默認就行）
2.第二個選項，選擇CSS預處理器，注意Sass有坑，node-sass會被“牆”，Stylus寫起來比較不適應（習慣python的可以嘗試），用less沒有問題。
3.第三個選項，是選擇ESlint的模式，這里選擇標准配置就行。
后邊的不管，如圖：
點擊“創建項目”，會出現一個預設保存，看自己心情咯！
完事創建項目，需要等待若干分鍾......
若干分鍾后，出現此頁面就創建成功了。
2.啟動項目：
現在關掉瀏覽器，用vscode打開項目，會出現如圖項目結構：
我們打開終端，在當前目錄下輸入：
npm run serve
這樣，一個Vue-cli項目就構建好了！
按住“ctrl”，點擊http://localhost:8080/。
3.補充：
每次都得手動點擊鏈接去打開網頁，很不方便，這里我們可以手動配置下，讓項目啟動時自動打開瀏覽器。
首先在根目錄下創建vue.config.js。（名字要一模一樣）
在這個文件中加入以下代碼：（表示自己啟動）
module.exports = { devServer: { open: true } }
再重新打開項目，就達到了我們想要的效果。
4.擴展：
關於開發環境和生產環境。
一般在開發當中，程序會在內存中去運行的環境叫做開發環境。指令是“npm run serve”。
一般在項目完成時，我們的項目會進行打包壓縮合並等操作，最終出來一個目錄/dist。這個/dist文件可以直接拉到服務器上進行上線部署，這就叫做生產環境。指令是“npm run build”。
結語：
本文介紹的流程較為簡單，還有許多細節沒有說到，這就需要我們在實踐中探索了。
對於流程性問題，更多在於熟練，再慢慢深入Vue的原理，這樣學習Vue這個框架才能達到事半功倍的效果。