首頁技術(shù)文章正文

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

更新時間:2022-10-06 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  打開命令行工具,使用vue creat命令創(chuàng)建項目,它會自動創(chuàng)建一個新的文件夾,并將所需的文件、目錄、配置和依賴都準備好。在命令行中切換到C:\vue\chapter07目錄,創(chuàng)建一個名稱為hello-vue的項目,具體命令如下:

vue creat hello-vue

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

alias vue='winpty vue.cmd'

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

  保存文件后,重新啟動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提示用戶選取一個preset(預(yù)設(shè)),default是默認項,包含基本的babel+eslint設(shè)置,適合快速創(chuàng)建一個新項目;Manually select features表示手動配置,提供可供選擇的npm包,更適合面向生產(chǎn)的項目,在實際工作中推薦使用這種方式。

  選擇手動配置后,會出現(xiàn)如下選項:

? 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ù)提示信息可知,按空格鍵可以選擇某一項,a鍵全選,i鍵反選。下面我們來對這些選項的作用進行解釋,具體如下。

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

  ·TypeScript:一種編程語言。

  ·Progressive Web App(PWA)Support:漸進式Web應(yīng)用支持。

  ·Router:vue-router。

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

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

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

  ·Unit Testing:單元測試。

  ·E2E Testing:端到端(end-to-end)測試。

  在選擇需要的選項后,程序還會詢問一些詳細的配置,讀者可以根據(jù)需要來選擇,也可以全部使用默認值。

  項目創(chuàng)建完成后,執(zhí)行如下命令進入項目目錄,啟動項目:

cd hello-vue
npm run serve

  項目啟動后,會默認啟動一個本地服務(wù),如下所示:

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

  在瀏覽器中打開http://localhost:8080,觀察頁面效果。

分享到:
在線咨詢 我要報名
和我們在線交談!