MDX 与 Vue 岛屿交互演示
在 Astro 的 Markdown 中无缝嵌入 Vue 3 组件,实现静态页面中的动态交互。
技术 演示
Astro 中的 MDX 与 Vue 岛屿
Astro 支持 MDX,这意味着你可以在 Markdown 文件中直接使用 Vue、React 等 UI 框架的组件!
这不仅让内容编写变得极度灵活,还完美契合了 Astro 的岛屿架构 (Islands Architecture):静态内容在构建时渲染为纯 HTML,只有交互组件才会发送 JavaScript 到客户端。
实时数据演示
下面是一个嵌入的 Vue 组件,它会在客户端实时获取数据。尝试交互看看:
—
注册用户
—
API 请求/天
—
正常运行
为什么这很重要?
- 极致的 SEO:外层的 Markdown 都是静态的,搜索引擎抓取毫无压力。
- 极快的首屏:主线程不会被沉重的 JS 阻塞。
- 极佳的 DX:开发者可以在同一套技术栈中自由切换静态与动态。
这正是 VoidCraft 官网选择 Astro + Vue 的原因。
评论
加载中...