👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗,👇下方是本篇教學的相關筆記。
為了確保 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 3 官方文件。
npx nuxi init nuxt-app
這個 nuxi init
指令是用來初始化一個 Nuxt 專案,等價 nuxi create
指令,你可以填字串作為專案資料夾名稱,例如 nuxt-app,也可以填寫完整路徑來建立專案目錄。
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
npx nuxi cleanup
nuxi clean
等價 nuxi cleanup
指令,用來刪除 Nuxt 自動產生的檔案和緩存包括:
npx nuxi upgrade
npx nuxi build
npx nuxi preview
npx nuxi generate
啟用 Nuxt DevTools
npx nuxi devtools enable
如果你想要關閉 Nuxt DevTools,可以使用以下指令來關閉,它會提示您是否要將 ./nuxt.config.ts 檔案內的 devtools.enabled 設定為 false
來關閉 DevTools。
npx nuxi devtools disable
感謝大家的閱讀,歡迎大家給予建議與討論,也請各位大大鞭小力一些:)
如果對這個 Nuxt 3 系列感興趣,可以訂閱
接收通知,也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。