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

1.什么是 vue-cli

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

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

2.安裝 vue-cli

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

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

# 查看vue - cli的版本， 檢驗vue - cli是否安裝成功
vue--version

3.解決 Windows PowerShell 不識別 vue 命令的問題

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

解決方案如下：

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

②瞅瞅RemoteSigned 命令

③輸入字符Y，回車即可

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

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

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

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

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

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

# OR

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

步驟2：在詳情頁面填寫項目名稱：

步驟3：在預設頁面選擇手動配置項目：

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

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

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

項目創(chuàng)建完成后，自動進入項目儀表盤：

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

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

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

步驟3：使用上下箭頭選擇vue 的版本，并使用回車鍵確認選擇：

步驟4：使用上下箭頭選擇要使用的css 預處理器，并使用回車鍵確認選擇：

步驟5：使用上下箭頭選擇如何存儲插件的配置信息，并使用回車鍵確認選擇：

步驟6：是否將剛才的配置保存為預設：

步驟7：選擇如何安裝項目中的依賴包：

步驟8：開始創(chuàng)建項目并自動安裝依賴包：

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