截止博客發布這天2019.6.20，vue的腳手架工具已經更新到：vue-cli 3.X，原來的項目搭建已經過時了：vue-cli2.0 的使用，特此出一篇新的vue項目構建教程。
關于Vue CLI 舊版本，Vue CLI 的包名稱由vue-cli改成了@vue/cli。 如果你已經全局安裝了舊版本的vue-cli(1.x 或 2.x)，你需要先通過npm uninstall vue-cli -g或yarn global remove vue-cli卸載它。
一、準備工作
VUE在日常開發中需要nodejs+npm環境，就是你先要安裝npm。如果你有使用過node，并安裝過npm，可以跳過這一步。詳情參考：nodejs
安裝好nodejs之后，在終端下面輸入命令node -v會有版本號出來。就說明安裝成功了。輸入npm -v也會有版本號出來，就說明，npm也已經安裝好了。
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。
如何安裝nodejs和npm并不屬于本教程的范圍，請你自行處理。
二、vue-cil相關安裝
安裝vue-cil 3.X
我們在安裝完nodejs+npm環境后，需要安裝vue-cli 3.X。可以使用下列任一命令安裝這個新的包：
菜鳥需注意 npm 和 yarn 是不同的環境，以下命令可在控制臺任何位置運行。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
你還可以用這個命令來檢查其版本是否正確 (3.x)：
vue --version
拉取 2.x 模板 (舊版本)
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能(有時我們還需要vue-cli 2.X 環境，因為有些老項目需要維護)，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
這樣你就可以使用2.X的模板了， vue init 的運行效果將會跟 vue-cli@2.x 相同。
vue init webpack my-project # 創建項目
具體的vue-cli 2.X 的使用請移步：vue最簡單的入門教程+實戰+Vue2+VueRouter2+webpack（一）
快速原型開發
vue-cli 3.X 支持對單個 *.vue進行編程，因此你可以使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發，不過這需要先額外安裝一個全局的擴展：
npm install -g @vue/cli-service-global
注意：vue serve 的缺點就是它需要安裝全局依賴，這使得它在不同機器上的一致性不能得到保證。因此這只適用于快速原型開發。這里本人并不推薦使用它。具體的詳細使用請參考這里：vue-cli 快速原型開發
三、創建一個項目
vue-cli 3.X 可以通過，運行以下命令來創建一個新項目：
vue create hello-world
但是本人不大喜歡這個，新版本的 vue-cli 3.X 提供了，圖形化界面的處理方式：
vue ui
上述命令會打開一個瀏覽器窗口，并以圖形化界面將你引導至項目創建的流程。
vue ui開啟圖形化界面后，跟隨博主的截圖進行操作即可.
點擊創建按鈕創建項目
項目名
選擇預設項
注意：如果你選擇了默認，你需要自行安裝vue-router，vuex等
勾選功能
注意：如果你不需要寫單元測試用例，則不需要勾選
Unit Testing。
創建配置
是否保存預設
運行項目
運行項目有兩種方式：圖形化界面運行和命令行運行。個人推薦命令行運行。
圖形化界面運行：
命令行運行：
進入你的項目存儲位置，運行項目.
cd ~/vue-cli3-demo # 我的項目名叫cd vue-cli3-demo，它存放在根目錄下。
npm run serve # 運行項目
運行結果
結語
至此，一個vue項目就創建完畢了。這里做一個簡單操作總結：
npm install -g @vue/cli
npm install -g @vue/cli-init
vue ui # 一陣界面操作
cd ~/vue-cli3-demo # 我的項目名叫cd vue-cli3-demo，它存放在根目錄下。
npm run serve # 運行項目
提示：后面還有精彩敬請期待，請大家關注我的專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。
