从 Gridsome 迁移

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

¥Gridsome is an open-source static site generator built on Vue and GraphQL.

Gridsome 和 Astro 之间的主要相似之处

¥Key Similarities between Gridsome and Astro

Gridsome 和 Astro 有一些相似之处，可以帮助你迁移项目：

¥Gridsome and Astro share some similarities that will help you migrate your project:

Gridsome 和 Astro 都是具有类似项目文件结构的现代 JavaScript 静态站点生成器。
Gridsome 和 Astro 都使用 src/ 文件夹来存放项目文件，并使用用于基于文件的路由的特殊 src/pages/ 文件夹。为你的网站创建和管理页面应该感觉很熟悉。
Astro 有使用 Vue 组件的官方集成并支持安装 NPM 包，其中包括几个用于 Vue 的。你将能够编写 Vue UI 组件，并且可能能够保留部分或全部现有的 Gridsome Vue 组件和依赖。
Astro 和 Gridsome 都允许你使用用于数据的无头 CMS、API 或 Markdown 文件。你可以继续使用你喜欢的内容创作系统，并能够保留现有内容。

Gridsome 和 Astro 之间的主要区别

¥Key Differences between Gridsome and Astro

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

¥When you rebuild your Gridsome site in Astro, you will notice some important differences:

Gridsome 是一个基于 Vue 的单页应用 (SPA)。Astro 网站是使用 .astro 组件构建的多页面应用，但也可以支持 React、Preact、Vue.js、Svelte、SolidJS、AlpineJS 和原始 HTML 模板。
作为 SPA，Gridsome 使用 vue-router 进行 SPA 路由，使用 vue-meta 管理 <head>。在 Astro 中，你将创建单独的 HTML 页面并直接控制你的页面 <head>，或在布局组件中。
Local file data: Gridsome uses GraphQL to retrieve data from your project files. Astro uses ESM imports and import.meta.glob() 从本地项目文件导入数据。可以使用标准 fetch() API 加载远程资源。GraphQL 可以选择添加到你的项目中，但默认情况下不包含。

从 Gridsome 切换到 Astro

¥Switch from Gridsome to Astro

要将 Gridsome 博客转换为 Astro，请从我们的博客主题入门模板开始，或者在我们的主题展示中探索更多社区博客主题。

¥To convert a Gridsome blog to Astro, start with our blog theme starter template, or explore more community blog themes in our theme showcase.

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

¥You can pass a --template argument to the create astro command to start a new Astro project with one of our official starters. Or, you can start a new project from any existing Astro repository on GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

将你现有的 Markdown（或 MDX，带有我们的可选集成）文件作为内容添加到创建 Markdown 或 MDX 页面。

¥Bring your existing Markdown (or MDX, with our optional integration) files as content to create Markdown or MDX pages.

由于 Gridsome 的项目结构与 Astro 的类似，因此你可以将项目中的多个现有文件复制到新 Astro 项目中的同一位置。然而，这两个项目结构并不相同。你可能需要检查 Astro 的项目结构以了解差异所在。

¥Since Gridsome’s project structure is similar to Astro’s, you may be able to copy several existing files from your project into the same location in your new Astro project. However, the two project structures are not identical. You may want to examine Astro’s project structure to see what the differences are.

由于 Astro 查询和导入本地文件的方式与 Gridsome 不同，你可能需要阅读有关如何使用 import.meta.glob() 加载文件的信息，以了解如何使用本地文件。

¥Since Astro queries and imports your local files differently than Gridsome, you may want to read about how to load files using import.meta.glob() to understand how to work with your local files.

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

¥To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on astro.new. You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in IDX, StackBlitz, CodeSandbox and Gitpod online development environments.