从Gridsome迁移到Astro

Gridsome 是一个基于 Vue 和 GraphQL 构建的开源静态站点生成器。

Gridsome 和 Astro 之间的关键相似点

Gridsome 和 Astro 有一些相似之处，这将帮助你迁移你的项目：

Gridsome 和 Astro 都是现代 Javascript 静态网站生成器，具有相似的项目文件结构。
Gridsome 和 Astro 都使用src/文件夹存放你的项目文件，同时使用特殊的src/pages/文件夹进行基于文件的路由。因此，为你的网站创建和管理页面应该会感到熟悉。
Astro 有对Vue组件的官方集成，并支持安装NPM包，其中包括一些 Vue 的包。你可以编写 Vue UI 组件，并且可能可以保留你现有 Gridsome 项目中的一部分或全部 Vue 组件和依赖。
Astro 和 Gridsome 都允许你使用无头（headless）CMS, APIs 或 Markdown 文件作为数据源。你可以继续使用你喜欢的内容创作系统，同时能保留你现有的内容。

当你在 Astro 中重建你的 Gridsome 网站时，你会注意到一些重要的差别：

Gridsome 是一个基于 Vue的单页应用程序（SPA）。而 Astro 站点是多页应用程序，它们使用.astro 组件构建，但也可以支持 React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit 和原生HTML模板。
作为 SPA，Gridsome 使用vue-router进行 SPA 路由，并使用vue-meta管理<head>。在 Astro 中，你将创建独立的 HTML 页面，并直接控制你的页面<head>，或在布局组件中控制。
本地文件数据：Gridsome 使用 GraphQL 从你的项目文件中检索数据。Astro 使用 ESM imports 和Astro.glob()助手从本地项目文件中导入数据。远程资源可以使用标准的fetch()API加载。GraphQL 可以选择性添加到你的项目中，但默认情况下不包含。

要将 Gridsome 博客转换为 Astro，可以从我们的博客主题启动模板开始，或者在我们的主题展示中查看更多社区博客主题。

你可以向create astro命令传递一个 --template 参数来使用我们的官方启动器开始一个新的 Astro 项目。或者，你可以从 GitHub 上的任何现有 Astro 仓库开始一个新项目。

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

将你现有的 Markdown 文件（或 MDX 文件，如果你选择了我们的可选集成）作为内容创建 Markdown 或 MDX 页面。

由于 Gridsome 的项目结构与 Astro 的类似，你可能可以将你项目中的一些现有文件复制到你新的 Astro 项目的同一位置。然而，两个项目的结构并不完全相同。你可能想要查看Astro 的项目结构以了解有哪些差异。

由于 Astro 比 Gridsome 以不同的方式查询并导入你的本地文件，你可能想要阅读有关如何使用Astro.glob()加载文件的文章，以理解如何处理你的本地文件。

要转换其他类型的网站，例如作品集或文档网站，请在astro.new上查看更多官方启动模板。你将找到每个项目的 GitHub 仓库链接，以及一键打开 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中的工作项目的链接。