React 的 Gatsby 和 Vue.js 的 Gridsome

为 Gridsome 做贡献

链接（来源和参考） 📰

条款和条件😂

GenAI LIVE! | 2025年6月4日

你是 Vue.js 😍 爱好者吗？我相信你也会喜欢 🤪 这款全新的静态网站生成器，它充分利用了 Vue.js + GraphQL = Gridsome的强大功能💪🏻 。

如今，该项目才刚刚启动 3 个月，但发展非常迅速。

但是...Gridsome 是什么？

Gridsome 是 Vue.js 生态系统中缺失的一环。Gatsby.js 为 React.js 所做的改变，彻底改变了我们构建网站的方式。React.js 非常出色，但我们认为 Vue.js 对于大多数刚开始使用 JAMstack 的网页设计师和开发者来说更​​易于上手。Gridsome 是 Gatsby 的 Vue.js 替代品。

使用 Gridsome  ，您可以获得一个 适用于所有已连接数据源的通用 GraphQL 层 。它就像您网站数据的单一真实来源，可用于任何页面或组件。它可连接到任何 CMS 或 API，例如 Google 电子表格、Airtable、Instagram Feed、本地 Markdown 文件等。

让我们看一些代码👨🏻‍💻。

连接到任何 CMS、API 或本地文件（例如 Markdown），并从 GraphQL 层访问。将数据仅包含所需字段插入任何 .vue 文件。

<template>
  <div>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.allWordPressPost.edges" :key="edge.node._id">
        {{ edge.node.title }}
      </li>
    </ul>
  </div>
</template>

<page-query>
query Blog {
  allWordPressPost (limit: 5) {
    edges {
      node {
        _id
        title
      }
    }
  }
}
</page-query>

您无需了解 GraphQL 或 Vue 即可开始使用 Gridsome。有一些入门套件可以帮助您轻松上手。

GraphQL 层和所有数据均可在本地 GraphQL 演练环境中访问。演练环境通常位于https://localhost:8080/___exploreGridsome 开发项目gridsome develop运行时。

您听说过 Google Lighthouse 吗？

其实不是另一个，是这个😅

Gridsome 的目标是打造一个框架，让您能够构建“开箱即用”的优化网站。它遵循Google 的 PRPL 模式。您无需成为性能专家，即可使用 Gridsome 创建快速的网站。您的网站在 Google Lighthouse 上开箱即用，即可获得近乎完美的评分。以下是 Gridsome 负责的一些性能步骤：

• 图像压缩和延迟加载
• CSS 和 JS 压缩
• 代码分割
• HTML 压缩
• 关键 CSS（插件）
• 完整的 PWA 和离线支持（插件）

我们只是触及了表面，未来您还可以看到更多内容。

为 Gridsome 做贡献

有两个兄弟正在从事这个项目，因此非常欢迎任何贡献。

让我们承诺让开发人员的网站开发过程更快、更轻松。

链接（来源和参考） 📰

• https://gridsome.org
• https://github.com/gridsome/
• https://discord.gg/7znJUkH

条款和条件😂

您同意，一旦您阅读了这篇文章，您一定会尝试使用 Gridsome 并喜欢这篇文章。

觉得这篇文章有趣吗？考虑请我喝杯咖啡。