什么是 vue-cli？vue-cli創(chuàng)建項(xiàng)目的兩種方式

1.什么是 vue-cli

特點(diǎn)：① 開(kāi)箱即用，② 基于 webpack，③ 功能豐富且易于擴(kuò)展，④ 支持創(chuàng)建 vue2 和 vue3 的項(xiàng)目

vue-cli 的中文官網(wǎng)首頁(yè)：https://cli.vuejs.org/zh/

2.安裝 vue-cli

vue-cli 是基于 Node.js 開(kāi)發(fā)出來(lái)的工具，因此需要使用 npm 將它安裝為全局可用的工具：

# 全局安裝 vue - cli
npm install - g @vue / cli

# 查看vue - cli的版本， 檢驗(yàn)vue - cli是否安裝成功
vue--version

3.解決 Windows PowerShell 不識(shí)別 vue 命令的問(wèn)題

默認(rèn)情況下，在PowerShell 中執(zhí)行 vue --version 命令會(huì)提示如下的錯(cuò)誤消息：

解決方案如下：

① 以管理員身份運(yùn)行PowerShell 執(zhí)行set-ExecutionPolicy

②瞅瞅RemoteSigned 命令

③輸入字符Y，回車(chē)即可

4.創(chuàng)建項(xiàng)目 vue-cli

提供了創(chuàng)建項(xiàng)目的兩種方式：

#基于【命令行】的方式創(chuàng)建vue項(xiàng)目
vue create 項(xiàng)目名稱(chēng)
# OR
#基于【可視化面板】創(chuàng)建vue項(xiàng)目
vue ui

4.1 基于 vue ui 創(chuàng)建 vue 項(xiàng)目

步驟1：在終端下運(yùn)行 vue ui 命令，自動(dòng)在瀏覽器中打開(kāi)創(chuàng)建項(xiàng)目的可視化面板：

#基于【命令行】的方式創(chuàng)建vue項(xiàng)目
vue create 項(xiàng)目名稱(chēng)

# OR

#基于【可視化面板】創(chuàng)建vue項(xiàng)目
vue ui

步驟2：在詳情頁(yè)面填寫(xiě)項(xiàng)目名稱(chēng)：

步驟3：在預(yù)設(shè)頁(yè)面選擇手動(dòng)配置項(xiàng)目：

步驟4：在功能頁(yè)面勾選需要安裝的功能(Choose Vue Version、Babel、CSS 預(yù)處理器、使用配置文件)：

步驟5：在配置頁(yè)面勾選vue 的版本和需要的預(yù)處理器：

步驟6：將剛才所有的配置保存為預(yù)設(shè)(模板)，方便下一次創(chuàng)建項(xiàng)目時(shí)直接復(fù)用之前的配置：

項(xiàng)目創(chuàng)建完成后，自動(dòng)進(jìn)入項(xiàng)目?jī)x表盤(pán)：

4.2基于命令行創(chuàng)建vue 項(xiàng)目

步驟1：在終端下運(yùn)行vue create demo2命令，基于交互式的命令行創(chuàng)建vue 的項(xiàng)目：

步驟2：選擇要安裝的功能：

步驟3：使用上下箭頭選擇vue 的版本，并使用回車(chē)鍵確認(rèn)選擇：

步驟4：使用上下箭頭選擇要使用的css 預(yù)處理器，并使用回車(chē)鍵確認(rèn)選擇：

步驟5：使用上下箭頭選擇如何存儲(chǔ)插件的配置信息，并使用回車(chē)鍵確認(rèn)選擇：

步驟6：是否將剛才的配置保存為預(yù)設(shè)：

步驟7：選擇如何安裝項(xiàng)目中的依賴(lài)包：

步驟8：開(kāi)始創(chuàng)建項(xiàng)目并自動(dòng)安裝依賴(lài)包：

步驟9：項(xiàng)目創(chuàng)建完成：