透過 100 多個技巧的集合學習 Nuxt!
公告·  

全新網站

我們很高興發布由 Nuxt UI 驅動且現在開源的全新 nuxt.com 網站。

Nuxt.com 是您想學習 Nuxt 的主要入口。 隨著每月超過 30 萬的訪客,是時候給它一個新的外觀和感覺了。

全新設計

我們回歸 Nuxt 的原始色彩,以海軍藍背景(#020420)及其標誌性的亮綠色(#00DC82)。

Nuxt Website Screenshot
探索Nuxt 設計套件以及我們的標誌歷史

我們希望在所有官方文件中實現一致的設計

Nuxt ImageNuxt ContentNuxt DevToolsNuxt UI

我們真的很喜歡這個新設計,並希望您也喜歡。這只是網站邁向許多改進的第一步。

改進的導航

從現在開始,您可以輕鬆地在五個主要文件類別之間跳轉

在右側,您可以看到目錄以及社群快捷方式:編輯此頁面、在 Discord 上聊天等。

原始碼按鈕

當查看 Nuxt 內建的元件組合式函式工具函式指令kit 工具時,您現在可以點擊按鈕跳轉到原始碼。

Nuxt Source Code Button
<NuxtLink> 文件頁面上查看一個範例。

改進的搜尋功能

當您按下 CMD+K 時,您可能會注意到一個新的模組。我們利用 Nuxt UI <CommandPalette> 元件結合 Nuxt Content 資料(搜尋與導航)來提供更好的搜尋體驗。

透過命令面板,您可以

  • 跳轉到頁面
  • 在文件中搜尋
  • 搜尋模組
  • 切換色彩模式

我們計畫很快加入更多指令。

遷移到 Nuxt UI

新網站由 Nuxt UI 提供支援,這是我們專為 Nuxt 量身打造的 UI 函式庫,並基於 Tailwind CSSHeadless UI 建構而成。

該網站也使用 Nuxt UI Pro,這是一組建立在 Nuxt UI 之上的高級元件,可在幾分鐘內建立美觀且反應靈敏的 Nuxt 應用程式。

它包含諸如 <UHeader><UFooter><ULandingHero><ULandingCard> 等元件。

我們計畫在 10 月底推出 Nuxt UI Pro 的完整文件。如果您迫不及待想搶先體驗,您現在可以購買授權並取得我們在 GitHub 上私人儲存庫的存取權。

這個遷移是改進 Nuxt UI 和 UI Pro 並修復一些錯誤的絕佳機會,以及程式碼變更的 +9,004 / -23,113 行的差異。

了解更多關於 Nuxt UI 的資訊。

Open Graph 圖片

當我們在社群媒體上分享連結時,我們非常喜歡擁有自訂圖片。這就是為什麼我們在所有文件頁面上加入了 OG 圖片。

安裝頁面的範例

Nuxt OG Image
探索 Nuxt OG Image 模組。

可在 GitHub 上取得

我們很自豪地宣布,該網站現在已開源,並且可在 GitHub 上取得。

在 GitHub 上查看 nuxt/nuxt.com

下一步是什麼?

這個新網站是我們計畫進行的後續變更的開始,其中一些是

  • 團隊與貢獻者頁面
  • 整合頁面以展示 Nuxt 的所有可能性:託管、CMS、資料庫等。
  • 範本頁面(目前為 nuxt.new)以列出官方和社群入門範本
  • 還有更多...

我們期待您在 TwitterDiscordGitHub 上提供回饋.

感謝您閱讀這篇部落格文章,並祝您 Nuxting 愉快 🤟