Astro 静态站点框架

Astro 是基于 Vite 的静态站点框架，支持多框架组件混用。

Astro 特点

特点	说明
零 JS	默认无客户端 JS
多框架	Vue/React/Svelte/Preact
基于 Vite	使用 Vite 构建
高性能	极快的页面加载

创建 Astro 项目

Bash

npm create astro@latest my-site

项目结构

astro

src/
├── pages/
│   └ index.astro       # 首页
│   └ about.astro
├── components/
│   └ Button.astro
│    Header.jsx         # React 组件
│   └ Card.vue          # Vue 组件

Astro 文件格式

astro

---
// 前端脚本（服务端执行）
const title = 'Hello Astro'
---

<html>
<head>
  <title>{title}</title>
</head>
<body>
  <h1>{title}</h1>

  <!-- 使用 Vue 组件 -->
  <Card client:visible title="My Card" />
</body>
</html>

<style>
  h1 { color: blue; }
</style>

注意：--- 中的代码在服务端执行，不发送到客户端。

多框架组件混用

Bash

---
import ReactCounter from './Counter.jsx'
import VueButton from './Button.vue'
import SvelteCard from './Card.svelte'
---

<ReactCounter client:load />
<VueButton client:visible />
<SvelteCard client:idle />

Client 指令

指令	说明
client:load	立即加载
client:visible	可见时加载
client:idle	空闲时加载
client:only	只客户端渲染

Astro vs 其他框架

对比项	Astro	Next.js	Nuxt
默认 JS	零 JS	有 JS	有 JS
多框架	支持	单框架	Vue
输出类型	静态	动态/静态	动态/静态
性能	极快	快	快

构建命令

text

# 开发
npm run dev

# 构建
npm run build

# 预览
npm run preview

适用场景

场景	Astro 适用性
博客	✓ 极好
文档站	✓ 极好
官网	✓ 极好
电商	△ 部分适用
社交	✗ 不适用

要点总结

Astro 默认零 JS 输出
支持多框架组件混用
基于 Vite 构建速度快
适合内容为主的静态站点

📝 发现内容有误？点击此处直接编辑