从 VuePress 迁移
VuePress 是一个基于 Vue 构建的开源静态站点生成器。
VuePress 和 Astro 之间的主要相似之处
标题为“VuePress 和 Astro 之间的主要相似之处”的部分VuePress 和 Astro 有一些相似之处,这将有助于你迁移项目
-
VuePress 和 Astro 都是现代的 JavaScript 静态站点生成器,具有相似的项目文件结构。两者都为基于文件的路由使用一个特殊的
src/pages/
文件夹。创建和管理站点的页面应该会感到很熟悉。 -
Astro 和 VuePress 都是为内容驱动的网站而设计的,对 Markdown 文件有出色的内置支持。使用 Markdown 写作会感到很熟悉,你将能够保留现有的内容。
-
Astro 有一个官方的集成用于使用 Vue 组件,并支持安装 NPM 包,包括几个用于 Vue 的包。你将能够编写 Vue UI 组件,并可能保留部分或全部现有的 Vue 组件和依赖项。
VuePress 和 Astro 之间的主要区别
标题为“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
标题为“从 VuePress 切换到 Astro”的部分要将 VuePress 文档站点转换为 Astro,可以从我们的官方 Starlight 文档主题入门模板开始,或者在我们的主题展示中探索更多社区文档主题。
你可以向 create astro
命令传递一个 --template
参数,用我们的一个官方入门模板来启动一个新的 Astro 项目。或者,你可以从 GitHub 上的任何现有 Astro 仓库开始一个新项目。
npm create astro@latest -- --template starlight
pnpm create astro@latest --template starlight
yarn create astro --template starlight
将你现有的 Markdown 内容文件引入以创建 Markdown 页面。你仍然可以利用基于文件的路由,方法是将这些文档从 VuePress 的 docs
目录移动到 Astro 的 src/pages/
目录。创建与你现有 VuePress 项目相对应的文件夹名称,你应该能够保留现有的 URL。
VuePress 或你安装的任何主题,可能已经为你处理了大部分的网站布局和元数据。你可能希望阅读关于构建 Astro 布局作为 Markdown 页面包装器的内容,以了解如何在 Astro 中自己管理模板,包括你的页面 <head>
。
你可以在 astro.new 上找到 Astro 的文档入门模板以及其他模板。你会找到每个项目的 GitHub 仓库链接,以及一键在 IDX、StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中打开工作项目的链接。
社区资源
标题为“社区资源”的部分如果你发现(或制作了!)一个关于将 VuePress 站点转换为 Astro 的有用的视频或博客文章,请将其添加到此列表中!