跳转到内容

从 VuePress 迁移

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

VuePress 和 Astro 有一些相似之处,这将有助于你迁移项目

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

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

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

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

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

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

终端窗口
npm create astro@latest -- --template starlight

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

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

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

更多迁移指南

贡献 社区 赞助