blog-engine-09-nuxt 構建快速、SEO友好和可擴充套件的Web應用程式變得輕鬆

老马啸西风發表於2024-03-28

擴充閱讀

blog-engine-01-常見部落格引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 對比

blog-engine-02-透過部落格引擎 jekyll 構建 github pages 部落格實戰筆記

blog-engine-02-部落格引擎jekyll-jekyll 部落格引擎介紹

blog-engine-02-部落格引擎jekyll-jekyll 如何在 windows 環境安裝,官方文件

blog-engine-02-部落格引擎jekyll-jekyll SEO

blog-engine-04-部落格引擎 hugo intro 入門介紹+安裝筆記

blog-engine-05-部落格引擎 Hexo 入門介紹+安裝筆記

blog-engine-06-pelican 靜態網站生成 官方文件

blog-engine-06-pelican 靜態網站生成 windows 安裝實戰

blog-engine-07-gatsby 建極速網站和應用程式 基於React的最佳框架,具備效能、可擴充套件性和安全性

blog-engine-08-vuepress 以 Markdown 為中心的靜態網站生成器

blog-engine-09-nuxt 構建快速、SEO友好和可擴充套件的Web應用程式變得輕鬆

blog-engine-10-middleman 靜態站點生成器,利用了現代 Web 開發中的所有快捷方式和工具

前言

由於個人一直喜歡使用 markdown 來寫 個人部落格,最近就整理了一下有哪些部落格引擎。

感興趣的小夥伴也可以選擇自己合適的。

nuxt

Nuxt是一個免費且開源的框架,提供直觀且可擴充套件的方式來建立基於Vue.js的型別安全、高效能和生產級別的全棧網站和應用程式。

它提供了許多功能,使得構建快速、SEO友好和可擴充套件的Web應用程式變得輕鬆,包括:

  • 伺服器端渲染、靜態站點生成、混合渲染和邊緣渲染

  • 帶有程式碼分割和預取的自動路由

  • 資料獲取和狀態管理

  • SEO最佳化和元標籤定義

  • 元件、組合和實用工具的自動匯入

  • 無需配置的TypeScript

  • 使用我們的server/目錄進行全棧開發

  • 透過200多個模組進行擴充套件

  • 部署到各種託管平臺

  • ...等等 🚀

🚀 入門指南

使用以下命令建立一個新的入門專案。這將建立一個帶有所有必要檔案和依賴項的入門專案:

npx nuxi@latest init <my-project>

還可以發現 nuxt.new:在 CodeSandbox、StackBlitz 或本地開啟一個 Nuxt 入門專案,幾秒鐘內即可開始執行。

💻 Vue 開發

簡單、直觀且強大,Nuxt 讓您以合理的方式編寫 Vue 元件。每個重複的任務都是自動化的,因此您可以放心地專注於編寫全棧 Vue 應用程式。

app.vue 示例:

<script setup lang="ts">
useSeoMeta({
  title: '遇見 Nuxt',
  description: '直觀的 Vue 框架。'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

📖 文件

我們強烈建議您檢視 Nuxt 文件 來提升技能。

這是一個瞭解框架更多資訊的好資源。它涵蓋了從入門到高階主題的所有內容。

🧩 模組

探索我們的 模組列表 來加速您的 Nuxt 專案,這些模組是由

windows 實際測試

初始化

建立資料夾:

d:
mkdir D:\blogs\nuxt
cd D:\blogs\nuxt

初始化:

npx nuxi@latest init test

報錯:

[19:02:41]  ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

網路不同,暫時不看了。

相關文章