iT邦幫忙

2023 iThome 鐵人賽

DAY 1
0
影片教學

Nuxt 3 快速入門系列 第 1

[影片教學] Nuxt 3 - 使用 nuxi 建立第一個專案

  • 分享至 

  • xImage
  •  

Yes

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


環境準備

Node.js - 建議安裝 v18 版本以上
VS Code - 可以安裝 Volar 插件的文字編輯器
Vue Language Features (Volar) 插件 - 強烈建議 Nuxt 與 Vue 開發者安裝

終端機指令

確認 Node 版本

node -v

使用 nuxi 建立 Nuxt 3 專案

初始化建立一個 Nuxt 3 專案。專案名為 nuxt-app

npx nuxi@latest init nuxt-app

啟動開發伺服器

npm run dev

開始開發專案

修改 app.vue

<template>
  <div>
    <h1>2023 iThome 鐵人賽</h1>
  </div>
</template>

新增 h1 樣式

<style scoped>
h1 {
  color: blue;
}
</style>

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

參考資料


下一篇
[影片教學] Nuxt 3 - nuxi (Nuxt CLI) 指令介紹
系列文
Nuxt 3 快速入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
derekdonyen
iT邦新手 5 級 ‧ 2024-01-26 09:26:29

您好,請問一下建立專案會出現以下錯誤:
Error: Failed to download template from registry: Invalid URL
試著依照搜尋的方法在hosts加入:
185.199.108.133 raw.githubusercontent.com
還是無法解決,可以指導一下嗎?謝謝。

Ryan iT邦新手 1 級 ‧ 2024-01-26 13:11:11 檢舉

嗨,您好

依據錯誤在網路上尋找到的資料,看起來是因為您的網路環境 DNS 無法正常解析所列網域或是可能有封鎖的情形,
看您的描述也依據網路上提供的方法,設定 hosts 讓該網域 raw.githubusercontent.com 直接解析成 185.199.108.133,
不過看起來您仍然無法正常運作。

建議您可以依據下列逐步檢查,確認您的網路環境是否有封鎖或是 DNS 解析異常的情形:

首先 Node 的版本建議在 v18 以上,可以使用 node -v 來檢查一下

  1. 根據您的環境設定好 hosts 後,使用 ping 來嘗試是否能丟到正確的 IP
    輸出結果類似下列文字
    ❯ ping raw.githubusercontent.com
    PING raw.githubusercontent.com (185.199.111.133): 56 data bytes
    64 bytes from 185.199.111.133: icmp_seq=0 ttl=55 time=61.654 ms
    64 bytes from 185.199.111.133: icmp_seq=1 ttl=55 time=60.172 ms

其中也會包含你所設定在 hosts 的 IP 185.199.108.133,如果 IP 不相同則說明您可能設定有誤
2. 您也可以直接嘗試修改 DNS 來試試看不同的解析伺服器,看是否能正常的解析出 IP,可以先使用 dig raw.githubusercontent.com @8.8.8.8 指令來嘗試使用 Google DNS 來解析網域,如果有成功應該會看到 185.199.111.133 IP,那麼您就可以嘗試使用這個 DNS
3. 如果上述步驟都沒有問題,接著可以嘗試直接瀏覽這個網址 raw.githubusercontent.com 應該會導回至 GitHub 的首頁
4. 如果 ping 到 185.199.108.133 的指令沒有回應或是無法瀏覽 raw.githubusercontent.com,有可能您的網路環境有針對 IP 封鎖的設定,您可以嘗試檢查防火牆或網路環境的相關設定
5. 如果無法碰觸到防火牆等出口請求限制,可以嘗試更換網路環境或是使用 VPN、Proxy 的方式來進行

這是目前我能找得到的資訊與想到的測試與解法,如果真的還是不行,您也可以先嘗試直接使用 npm install 直接安裝 nuxt,或直接從系列文章中的專案原始碼來直接開始進行開發,不過這樣可能仍無法使用 npx 的相關模板指令,請您自行斟酌。
https://github.com/ryanchien8125/ithome-2023-ironman-nuxt3-video/tree/day04/nuxt-app-tailwindcss

我要留言

立即登入留言