📋 环境准备

  • Node.js 18.14.1+
  • 包管理器：npm、pnpm 或 yarn
  • 编辑器：VS Code + Astro 扩展

🚀 创建项目

bash
# 使用向导创建项目
npm create astro@latest

# 或使用模板
npm create astro@latest -- --template blog

# 或从 GitHub 模板
npm create astro@latest -- --template user/repo

📁 项目结构

text
my-project/
├── public/           # 静态资源
│   └── favicon.svg
├── src/
│   ├── components/   # 组件
│   ├── layouts/      # 布局
│   ├── pages/        # 页面（路由）
│   │   └── index.astro
│   └── content/      # 内容集合
├── astro.config.mjs  # 配置文件
└── package.json

💻 创建页面

基本页面

astro (src/pages/index.astro)
---
const title = "Hello Astro";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>这是我的第一个 Astro 页面！</p>
  </body>
</html>

使用布局

astro (src/layouts/Main.astro)
---
const { title } = Astro.props;
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
    <main>
      <slot />
    </main>
  </body>
</html>
astro (src/pages/about.astro)
---
import Main from '../layouts/Main.astro';
---

<Main title="关于我们">
  <h1>关于我们</h1>
  <p>这是一个关于页面。</p>
</Main>

🔧 开发命令

bash
# 开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 添加集成
npx astro add react

📦 添加集成

bash
# 添加 React 支持
npx astro add react

# 添加 Tailwind CSS
npx astro add tailwind

# 添加 MDX 支持
npx astro add mdx