iT邦幫忙

2023 iThome 鐵人賽

DAY 2
1
影片教學

Nuxt 3 快速入門系列 第 2

[影片教學] Nuxt 3 - nuxi (Nuxt CLI) 指令介紹

  • 分享至 

  • xImage
  •  

Yes

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。


前置作業

為了確保 Nuxt CLI 不存在快取或版本上的差異,建議可以清除快取來重新安裝。

執行下列指令來清除 npx 快取

npx clear-npx-cache

它會執行下列指令來刪除 npx 的快取。如果你有辦法得知 Nuxt CLI 的在 _npx 目錄下的所在目錄名稱,也可以手動刪除。

rm -rf $(npm get cache)/_npx/*

當一切準備就緒後,你可以執行下列程式,它會安裝最新版本的 Nuxt CLI 並執行 --help 來看相關說明。

npx nuxi@latest --help

Nuxt CLI 常用指令

影片內與以下介紹的指令有將部份參數省略,僅針對入門來講述一些常用的指令與參數,若有興趣翻翻完整的指令與參數說明,可以參考 Nuxt 3 官方文件

建立 Nuxt 專案

npx nuxi init nuxt-app

這個 nuxi init 指令是用來初始化一個 Nuxt 專案,等價 nuxi create 指令,你可以填字串作為專案資料夾名稱,例如 nuxt-app,也可以填寫完整路徑來建立專案目錄。

檢查 Nuxt 專案相關資訊

npx nuxi info

啟動開發伺服器的參數

npx nuxi dev -p 5173
# 或
npm run dev -- -p 5173

當我們在本地端進行開發時,需要運行開發環境,當我們執行 npm run dev -- -p 5173 時,依據 package.json 中的 scripts 所列,其實就是在執行 nuxi dev -p 5173,來將預設的監聽的 Port: 3000 調整為 5173

添加 SSL 臨時憑證(HTTPS)

npm run dev -- -p 5173 --https

清除自動產生的 Nuxt 檔案和快取

npx nuxi cleanup

nuxi clean 等價 nuxi cleanup 指令,用來刪除 Nuxt 自動產生的檔案和緩存包括:

  • .nuxt
  • .output
  • dist
  • node_modules/.vite
  • node_modules/.cache

升級 Nuxt 3 版本

npx nuxi upgrade

打包專案建構生產環境需要的程式包

npx nuxi build

預覽網站

npx nuxi preview

產生靜態網站使用的預渲染

npx nuxi generate

開發工具 Nuxt DevTools

啟用 Nuxt DevTools

npx nuxi devtools enable

如果你想要關閉 Nuxt DevTools,可以使用以下指令來關閉,它會提示您是否要將 ./nuxt.config.ts 檔案內的 devtools.enabled 設定為 false 來關閉 DevTools。

npx nuxi devtools disable

感謝大家的閱讀,歡迎大家給予建議與討論,也請各位大大鞭小力一些:)
如果對這個 Nuxt 3 系列感興趣,可以訂閱接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

參考資料
Nuxt CLI Commands - Init


上一篇
[影片教學] Nuxt 3 - 使用 nuxi 建立第一個專案
下一篇
[影片教學] Nuxt 3 + ESLint + Prettier 環境建置
系列文
Nuxt 3 快速入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言