从 Gridsome 迁移

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 都允许你使用无头 CMS、API 或 Markdown 文件作为数据源。你可以继续使用你喜欢的内容创作系统，并且能够保留你现有的内容。

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

Gridsome 是一个基于 Vue 的单页应用（SPA）。Astro 站点是使用 .astro 组件构建的多页应用，但也支持React、Preact、Vue.js、Svelte、SolidJS、AlpineJS 和原生 HTML 模板。
作为一个单页应用（SPA），Gridsome 使用 vue-router 进行 SPA 路由，并使用 vue-meta 管理 <head>。在 Astro 中，你将创建独立的 HTML 页面，并直接或在布局组件中控制页面的 <head>。
本地文件数据：Gridsome 使用 GraphQL 从你的项目文件中检索数据。Astro 使用 ESM 导入和 import.meta.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 不同，你可能需要阅读关于如何使用 import.meta.glob() 加载文件的文档，以了解如何处理你的本地文件。

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