1.什么是 vue-cli

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

特點：① 開箱即用，② 基于 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)建項目時直接復用之前的配置：

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

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

項目創(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)建完成：

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

最新評論