Vue開(kāi)發(fā)環(huán)境：如何使用vue creat命令創(chuàng)建項(xiàng)目

　　打開(kāi)命令行工具，使用vue creat命令創(chuàng)建項(xiàng)目，它會(huì)自動(dòng)創(chuàng)建一個(gè)新的文件夾，并將所需的文件、目錄、配置和依賴(lài)都準(zhǔn)備好。在命令行中切換到C:\vue\chapter07目錄，創(chuàng)建一個(gè)名稱(chēng)為hello-vue的項(xiàng)目，具體命令如下：

vue creat hello-vue

　　需要注意的是，如果在Windows上通過(guò)MinTTY使用git-bash，交互提示符會(huì)不起作用，為了解決這個(gè)問(wèn)題，需要用winpty來(lái)執(zhí)行vue命令。為了方便使用，可以在git-bash安裝目錄下找到etc\bash.bashrc文件，在文件末尾添加以下代碼：

alias vue='winpty vue.cmd'

　　上述代碼表示將vue命令變成一個(gè)別名，實(shí)際執(zhí)行的命令為winpty vue.cmd。

　　保存文件后，重新啟動(dòng)git-bash，然后重新執(zhí)行vue creat hello-vue，結(jié)果如下：

Vue CLI v3.10.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features

　　在上述結(jié)果中，Vue CLI提示用戶(hù)選取一個(gè)preset(預(yù)設(shè))，default是默認(rèn)項(xiàng)，包含基本的babel+eslint設(shè)置，適合快速創(chuàng)建一個(gè)新項(xiàng)目;Manually select features表示手動(dòng)配置，提供可供選擇的npm包，更適合面向生產(chǎn)的項(xiàng)目，在實(shí)際工作中推薦使用這種方式。

　　選擇手動(dòng)配置后，會(huì)出現(xiàn)如下選項(xiàng)：

? Check the features needed for your project: (Presee <space> to select,
  <a> to toggle all, <i>to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

　　根據(jù)提示信息可知，按空格鍵可以選擇某一項(xiàng)，a鍵全選，i鍵反選。下面我們來(lái)對(duì)這些選項(xiàng)的作用進(jìn)行解釋?zhuān)唧w如下。

　　·Babel：Babel配置(Babel是一種JavaScript語(yǔ)法的編譯器)。

　　·TypeScript：一種編程語(yǔ)言。

　　·Progressive Web App(PWA)Support：漸進(jìn)式Web應(yīng)用支持。

　　·Router：vue-router。

　　·Vuex：Vue狀態(tài)管理模式。

　　·CSS Pre-processors：CSS預(yù)處理器。

　　·Linter/Formatter：代碼風(fēng)格檢查和格式化。

　　·Unit Testing：?jiǎn)卧獪y(cè)試。

　　·E2E Testing：端到端(end-to-end)測(cè)試。

　　在選擇需要的選項(xiàng)后，程序還會(huì)詢(xún)問(wèn)一些詳細(xì)的配置，讀者可以根據(jù)需要來(lái)選擇，也可以全部使用默認(rèn)值。

　　項(xiàng)目創(chuàng)建完成后，執(zhí)行如下命令進(jìn)入項(xiàng)目目錄，啟動(dòng)項(xiàng)目：

cd hello-vue
npm run serve

　　項(xiàng)目啟動(dòng)后，會(huì)默認(rèn)啟動(dòng)一個(gè)本地服務(wù)，如下所示：

App running at:
- Local:   http://localhost:8080/

　　在瀏覽器中打開(kāi)http://localhost:8080，觀(guān)察頁(yè)面效果。