Skip to content

从 VuePress 迁移

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

¥VuePress is an open-source static site generator built on Vue.

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

Section titled VuePress 和 Astro 之间的主要相似之处

¥Key Similarities between VuePress and Astro

VuePress 和 Astro 有一些相似之处,可以帮助你迁移项目:

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

  • VuePress 和 Astro 都是现代 Javascript 静态站点生成器,具有相似的项目文件结构。两者都使用 用于基于文件的路由的特殊 src/pages/ 文件夹。为你的网站创建和管理页面应该感觉很熟悉。

  • Astro 和 VuePress 都是为 内容驱动的网站 设计的,对 Markdown 文件具有出色的内置支持。用 Markdown 写作会感觉很熟悉,并且你将能够保留现有的内容。

  • Astro 有 使用 Vue 组件的官方集成 并支持 安装 NPM 包,其中包括几个用于 Vue 的。你将能够编写 Vue UI 组件,并且可能能够保留部分或全部现有的 Vue 组件和依赖。

VuePress 和 Astro 之间的主要区别

Section titled VuePress 和 Astro 之间的主要区别

¥Key Differences between VuePress and Astro

当你在 Astro 中重建 VuePress 站点时,你会注意到一些重要的差异。

¥When you rebuild your VuePress site in Astro, you will notice some important differences.

  • VuePress 是一个基于 Vue 的单页应用 (SPA)。Astro 网站是使用 .astro 组件 构建的多页面应用,但也可以支持 React、Preact、Vue.js、Svelte、SolidJS、AlpineJS、Lit 和原始 HTML 模板。

  • 布局模板:VuePress 网站是使用 Markdown (.md) 文件创建页面内容,使用 HTML (.html) 模板创建布局。Astro 是基于组件的,并使用 Astro 组件,其中包括页面、布局和单个 UI 元素的 HTML 模板。Astro 还可以创建 .md.mdx 文件中的页面,使用 Astro 布局组件将 Markdown 内容封装在页面模板中。

  • VuePress 旨在构建内容丰富、以 Markdown 为中心的网站,并具有一些内置的、特定于文档的网站功能,你必须在 Astro 中自己构建这些功能。相反,Astro 通过 官方文档主题 提供了一些特定于文档的功能。该网站是该模板的灵感来源!你还可以在我们的主题展示中找到更多具有内置功能的 社区文档主题

¥Switch from VuePress to Astro

要将 VuePress 文档站点转换为 Astro,请从我们的官方 星光文档主题入门模板 开始,或在我们的 主题展示 中探索更多社区文档主题。

¥To convert a VuePress documentation site to Astro, start with our official Starlight docs theme starter template, or explore more community docs 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.

Terminal window
npm create astro@latest -- --template starlight

将你现有的 Markdown 内容文件带到 创建 Markdown 页面。你仍然可以通过将这些文档从 VuePress 中的 docs 移动到 Astro 中的 src/pages/ 来利用 基于文件的路由。创建名称与现有 VuePress 项目相对应的文件夹,并且你应该能够保留现有的 URL。

¥Bring your existing Markdown content files to create Markdown pages. You can still take advantage of file-based routing by moving these documents from docs in VuePress to src/pages/ in Astro. Create folders with names that correspond to your existing VuePress project, and you should be able to keep your existing URLs.

VuePress 或你安装的任何主题可能会为你处理大部分站点布局和元数据。你可能希望阅读有关 将 Astro 布局构建为 Markdown 页面封装器 的内容,了解如何在 Astro 中自行管理模板,包括你的页面 <head>

¥VuePress, or any theme you installed, probably handled much of your site layout and metadata for you. You may wish to read about building Astro Layouts as Markdown page wrappers to see how to manage templating yourself in Astro, including your page <head>.

你可以在 astro.new 上找到 Astro 的文档入门和其他模板。你将找到每个项目的 GitHub 存储库的链接,以及用于在 StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中打开工作项目的一键链接。

¥You can find Astro’s docs starter, and other 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 StackBlitz, CodeSandbox and Gitpod online development environments.

¥Community Resources

  • 添加你自己的!

More migration guides

Astro 中文网 - 粤ICP备13048890号