1.什么是 vue-cli

vue-cli(俗稱：vue 腳手架)是 vue 官方提供的、快速生成 vue 工程化項(xiàng)目的工具。

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

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的版本， 檢驗(yàn)vue - cli是否安裝成功
vue--version

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

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

解決方案如下：

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

②瞅瞅RemoteSigned 命令

③輸入字符Y，回車即可

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

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

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

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

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

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

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

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

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

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

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

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

vue ui 的本質(zhì)：通過可視化的面板采集到用戶的配置信息后，在后臺基于命令行的方式自動初始化項(xiàng)目：

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

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

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

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

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

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

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

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

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

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

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

到此這篇關(guān)于什么是 vue-cli及創(chuàng)建vue-cli項(xiàng)目的方法的文章就介紹到這了,更多相關(guān)vue-cl創(chuàng)建項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論