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