教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

什么是 vue-cli?怎樣創(chuàng)建vue-cli項(xiàng)目?

更新時(shí)間:2022年01月06日15時(shí)47分 來(lái)源:傳智教育 瀏覽次數(shù):

1.什么是 vue-cli

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

特點(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,回車即可

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 命令,自動(dòng)在瀏覽器中打開(kāi)創(chuàng)建項(xiàng)目的可視化面板:

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

# OR

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

步驟2:在詳情頁(yè)面填寫(xiě)項(xià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ù)用之前的配置:

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

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

項(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 的版本,并使用回車鍵確認(rèn)選擇:

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

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

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

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

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

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


猜你喜歡:

vue-router工作原理:hash模式和history模式介紹

vue全家桶是指什么?有哪些東西?【附贈(zèng)Vue2+Vue3教程】

vue組件三大部分: template、script、style

Vue3為什么使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)?

傳智教育html前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!