Astro 速查

Astro 是内容优先的网站框架，默认输出零 JS 的静态 HTML，按需「孤岛」加载交互组件。

核心理念

群岛架构（Islands）：页面默认静态，交互组件单独注水（hydrate）
组件无关：同一页面可混用 React / Vue / Svelte 组件
内容集合（Content Collections）：src/content/ 内 Markdown/MDX 带类型校验

项目结构

src/
├── pages/          # 文件即路由（index.astro → /）
├── components/     # .astro / .vue / .tsx 组件
├── layouts/        # 布局组件
└── content/        # 内容集合（Markdown/MDX）

常用命令

bash

npm create astro@latest   # 创建项目
npm run dev               # 开发服务器
npm run build             # 构建到 dist/
npm run preview           # 预览

指令注水

astro

---
import Counter from '../components/Counter.vue'
---

<Counter client:load />    <!-- 立即加载 -->
<Counter client:idle />    <!-- 浏览器空闲时加载 -->
<Counter client:visible /> <!-- 进入视口时加载 -->

常见坑

client: 指令只对框架组件有效（.vue/.tsx），纯 .astro 组件本身就是静态的；
动态路由：src/pages/blog/[slug].astro + getStaticPaths()；
图片：用 astro:assets 的 <Image /> 自动优化，不要直接引大图。