Vue-5 認識vue-cli工具

  • 快速創建工程的兩種方法
  • 工程化項目的目錄
    我這裏的node與npm的版本如下:
    在這裏插入圖片描述

安裝vue-cli腳手架

全局安裝vue-cli腳手架可使用命令:npm install -g @vue/cli或者cnpm install -g @vue/cli
在這裏插入圖片描述
在這裏插入圖片描述

如何創建一個vue工程

  1. 進入創建工程的目錄
  2. 使用vue create 項目名創建一個工程
  3. 也可以使用vue ui這個命令進行創建一個工程
    項目名應該使用短橫線或者下橫線,小寫的英文字母

使用vue create創建一個工程

如果使用default模式,它就會創建一個默認選項的工程,這裏使用手動選擇功能
我的系統是win7,使用是cmd.exe命令行工具,因爲使用Git Bash Use arrow keys無法選擇
在這裏插入圖片描述
在這裏插入圖片描述
Babel:用來解析ES6語法
Router: 路由組件
Vuex: 狀態控制Vuex組件
CSS Pre-processors:CSS預編譯的組件
在這裏插入圖片描述
平時寫代碼的時候會有一些規則讓我們的代碼更優美,建議選擇Airbnb config或者Standard config,這裏選擇Airbnb config
這裏選擇的是: Lint on save
在這裏插入圖片描述
如果這裏選擇y,那麼今後創建的所有項目都會按照剛纔手動配置的這些選項去創建項目,這裏建議選擇N
在這裏插入圖片描述
創建項目的過程:
在這裏插入圖片描述
如果這裏創建的項目慢的話,可以按Ctrl+c終止,然後進入項目目錄,使用cnpm install命令進行安裝
項目創建成功,如下圖:
在這裏插入圖片描述
cd 到項目目錄,執行npm run serve,成功後如下:
在這裏插入圖片描述
在這裏插入圖片描述

使用vue ui命令創建一個工程

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
項目完成如下:
這裏可以看到我們安裝了哪些插件:
在這裏插入圖片描述
項目中的運行依賴、開發依賴:
在這裏插入圖片描述
CLI工具的配置:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章