Logo

菜单

发布于 2026-01-06 4 阅读
0

👾 Astro Framework 入门

👾 Astro Framework 入门

作者：奇杜梅·纳姆迪

介绍

在瞬息万变的 Web 开发领域，紧跟最新工具和技术至关重要。Astro.js 就是这样一种近年来备受瞩目的技术。它旨在简化 Web 开发流程，为构建现代网站和应用程序提供了一种创新方法。

Astro.js 通常被称为“静态网站生成器”，它为开发者提供了一个用于构建静态和动态网页的综合框架。Astro.js 融合了静态网站生成和服务器端渲染的最佳特性，提供了一种独特的解决方案，能够优化性能、提高开发者效率并提供卓越的用户体验。

Astro 是一个专为速度而设计的一体化 Web 框架。您可以从任何位置提取内容并将其部署到任何地方，所有这一切都由您喜爱的 UI 组件和库提供支持。- Astro.js

使用 Astro.js 的好处和优势数不胜数。首先，它使开发人员能够充分利用组件化开发的强大功能，构建可重用的 UI 元素。这种模块化方法不仅增强了代码组织性，还促进了团队成员之间的协作，从而更易于维护和扩展项目。

Astro.js 最令人瞩目的成就之一便是其惊人的速度。2023年，Astro.js 与其他框架进行了性能对比。Astro.js、Next.js、Nuxt、SvelteKit、WordPress、Remix 和 Gatsby 都参与了主要核心性能指标的测试。在首次输入延迟 (FID) 测试中，Astro.js 位列第二，仅次于 SvelteKit。而在累积布局偏移 (CLS)、最大内容绘制 (LCP) 和交互到下次绘制 (INP) 测试中，Astro.js 则遥遥领先。

Astro.js 的另一大优势在于其能够与各种前端框架和库无缝集成。无论您偏好 React、Vue.js、Svelte 还是其他任何流行的 JavaScript 框架，Astro.js 都提供了一个灵活且与框架无关的环境，使开发人员能够使用他们偏好的工具。这种兼容性确保开发人员能够充分利用他们现有的知识和经验，同时获得 Astro.js 带来的诸多优势。

Astro.js 的一大亮点在于其极速的网站加载能力。Astro.js 采用静态网站生成和智能缓存技术，通过预渲染页面并直接通过内容分发网络 (CDN) 提供服务，从而优化网站性能。这种方法无需在每次请求时都进行服务器端渲染，最终实现了闪电般的加载速度，并提升了 SEO 排名。

Astro.js 在降低管理多个数据源和 API 的复杂性方面也表现出色。凭借其统一的数据获取方式，开发人员可以无缝地从各种来源获取数据，并将其与静态内容一起渲染。这简化了开发流程，无需编写单独的数据获取和渲染逻辑，从而生成更简洁的代码并提高开发人员的效率。

现在我们已经讨论了 Astro.js 的优势和益处，接下来让我们确定本文的目标读者。这篇内容全面的指南专为希望提升技能并掌握现代开发方法的 Web 开发人员量身打造。无论您是经验丰富的开发人员，希望优化工作流程，还是充满热情的新手，渴望投身 Web 开发领域，本文都将为您开启 Astro.js 之旅奠定坚实的基础。

在接下来的章节中，我们将深入探讨 Astro.js 的核心概念，探索其关键特性，并指导您完成第一个 Astro.js 项目的搭建过程。读完本文后，您将掌握足够的知识和信心，利用 Astro.js 构建高性能、可扩展且视觉效果惊艳的网站和应用程序。现在，让我们一起踏上这段激动人心的 Astro.js 之旅，释放它在现代 Web 开发中的真正潜力吧！

安装和设置

在本节中，我们将学习如何在我们的机器上设置 Astrojs 项目，但首先，我们必须确保一些工具和二进制文件已经在我们的系统中安装。

  • Node.js：我们需要在系统中安装Node.js二进制文件。请访问https://nodejs.org/en/download并安装适用于您机器的二进制文件。
  • npm 或 yarn：它们是 Node 包管理器，用于维护和管理项目的依赖项和 Node.js 环境。npm 和 yarnnpm都已包含在 Node.js 二进制文件中，因此安装 Node.js 后无需单独安装 npm。yarn可以通过运行以下命令安装npm i yarn -g：

现在，所有二进制文件都已安装完毕。要测试一切是否正常运行，请在终端中运行以下命令。

node -v
npm -v
yarn -v
Enter fullscreen mode Exit fullscreen mode

如果你能获取到二进制文件的版本号，那就万事俱备了。

下一节，我们将学习如何创建一个新的 Astrojs 项目。

创建你的第一个天文项目

要创建一个新的 Astrojs 项目，请在终端中运行以下命令。

npx create-astro my-astro-project

# create a new project with yarn
yarn create astro

# create a new project with npm
npm create astro@latest
Enter fullscreen mode Exit fullscreen mode

这将在该my-astro-project目录中创建一个新的 Astrojs 项目。但首先，系统会提示您选择新项目将要创建的目录。

 astro   v2.5.7 Launch sequence initiated.

   dir   Where should we create your new project?
         ./astro-prj
Enter fullscreen mode Exit fullscreen mode

接下来，系统会提示您选择项目模板。

  tmpl   How would you like to start your new project?
         ○ Include sample files
         ○ Use blog template
         ● Empty
Enter fullscreen mode Exit fullscreen mode

对于这个项目，我选择了这个Empty项目。

完成一些后台工作后，它会提示您安装依赖项。

  deps   Install dependencies? (recommended)
         ● Yes  ○ No
Enter fullscreen mode Exit fullscreen mode

选择Yes安装依赖项。接下来会提示您是否要在项目中使用 TypeScript：

  ts   Do you plan to write TypeScript?
         ● Yes  ○ No
Enter fullscreen mode Exit fullscreen mode

接下来，需要确定是否要在项目中初始化一个 git 仓库。

  git   Initialize a git repository?
         ● Yes  ○ No
Enter fullscreen mode Exit fullscreen mode

最后，你会看到这样的画面：


  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./astro-prj
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
Enter fullscreen mode Exit fullscreen mode

将会在该astro-prj目录中创建一个 Astrojs 项目。

项目创建完成后，导航到项目目录并运行以下命令以启动开发服务器。

cd astro-prj
npm run dev

(base) ➜  astro-prj git:(master) npm run dev

> astro-prj@0.0.1 dev
> astro dev

  🚀  astro  v2.5.7 started in 68ms

  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose
Enter fullscreen mode Exit fullscreen mode

服务器将在 . 启动http://127.0.0.1:3000/。在浏览器中打开该 URL 即可查看 Astrojs 项目。

现在，我们已经成功创建了第一个 Astrojs 项目。接下来，我们将学习项目结构。

项目结构

Astrojs项目的结构如下：

├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── public
│   ├── favicon.svg
│   ├── index.css
│   └── index.js
├── src
│   ├── components
│   │   └── App.astro
│   ├── layouts
│   │   └── default.astro
│   ├── pages
│   │   ├── 404.astro
│   │   └── index.astro
│   └── styles
│       └── global.css
└── yarn.lock
Enter fullscreen mode Exit fullscreen mode

这是一个基本的Astrojs项目的结构。让我们一起来看看项目中的文件和目录。

  • 该astro.config.mjs文件是 Astrojs 项目的配置文件。

  • 该public目录包含项目的静态资源。

  • 该src目录包含项目的源代码。

  • 该components目录包含项目的各个组件。

  • 该layouts目录包含项目的布局文件。

  • 该pages目录包含项目的各个页面。

  • 该styles目录包含项目的样式。

下一节，我们将学习 Astrojs 布局和页面。


精炼仓库

定义布局和页面

Astrojs 中的页面与 Nextjs 中的页面类似。它们负责 Astrojs 项目的路由。pages目录中的每个文件都是项目中的一个页面。例如，目录index.astro中的文件pages是项目的首页。

├── pages
│   ├── 404.astro
│   └── index.astro
Enter fullscreen mode Exit fullscreen mode

该404.astro文件是项目的 404 页面。

├── pages
│   ├── about.astro
│   ├── contact.astro
│   ├── blog
│   │   ├── [slug].astro
│   │   └── index.astro
│   └── index.astro
Enter fullscreen mode Exit fullscreen mode

上述目录结构中的所有文件都是项目的页面。每个页面都构成了项目的路由。当浏览器访问其映射的路由 URL 时，相应的文件就会被加载。因此，目录中的每个文件都src/pages/根据其文件路径成为网站上的一个端点。

`about`about.astro和 ` contact.astrocontact` 文件分别是项目的“关于”页面和“联系”页面。`blog`blog目录包含项目的博客页面。`blog`目录index.astro中的 `blog` 文件blog是博客首页。`blog`[slug].astro文件是博客文章页面。

请注意，Astrojs 支持动态路由。我们有blog一个文件夹，其中有三个文件：`blog`、`blog.js`、`blog.js` 和 ` index.astroblog.js` [slug].astro。现在，` blogblog` 文件夹变成了一个子路径，`blog`index.astro映射到/blog/URL，`blog.js`[slug].astro映射到/blog/:slugURL。`blog.js`:slug是一个动态参数。因此，如果我们有一篇博客文章的别名是 `blog.js` hello-world，那么它的 URL 将是 `blog.js` /blog/hello-world。

所以：

blog/ will load blog/index.astro file

/blog/hello-world will load blog/[slug].astro file
Enter fullscreen mode Exit fullscreen mode

这个过程被称为路由定义file-based routing。这是一种在 Astrojs 中定义路由的简单直观的方法。

布局

Astrojs 中的布局类似于 HTML 模板，用于提供可重用的 UI 结构。目录default.astro中的文件layouts是项目的默认布局。

├── layouts
│   └── default.astro
Enter fullscreen mode Exit fullscreen mode

该default.astro文件用作项目所有页面的布局模板。default.astro文件内容如下：

---
import { Head } from 'https://astrojs.org'
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="/index.css" />
    <script type="module" src="/index.js"></script>
  </head>

  <body>
    <slot />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

该slot元素用于注入放置在布局组件之间的外部内容。这类似于ng-contentAngular 和{children}Reactjs 中的 `<div>` 标签。

假设我们有一个布局MyLayout.astro：

---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <BaseHead title="{title}" />
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">Posts</a>
      <a href="#">Contact</a>
    </nav>
    <h1>{title}</h1>
    <article>
      <slot />
      <!-- your content is injected here -->
    </article>
    <footer />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

我们来看看如何渲染它：

---
import MyLayout from '../layouts/MyLayout.astro';
---

<MyLayout title="MyLayout">
  <p>My layout!</p>
</MyLayout>
Enter fullscreen mode Exit fullscreen mode

该值<p>My layout!</p>将被注入到文件<slot />中的元素中MyLayout.astro。该title属性将被传递给MyLayout.astro文件。

我们将在下一节学习更多关于道具的知识。

使用 Astro 构建组件

组件是所有面向组件框架的基本构建模块。Astrojs 就是一个面向组件的框架，它围绕组件构建而成。

组件是用户界面的独立单元，它们可重用且可组合，因此易于维护和测试。使用 Astro 构建的整个网站都由组件构成，所以 Astrojs 本身就是一个组件树。

要在 Astrojs 中创建一个组件，我们只需创建一个文件名以 `.` 结尾的文件.astro。例如，`.`Component.astro就是一个 Astrojs 组件。我们已经创建了一个组件。

组件的基本框架如下所示：

---
// Component Script (JavaScript)
---
<!-- Component Template (HTML + JS Expressions) -->
Enter fullscreen mode Exit fullscreen mode

此Component Script部分用于编写 JavaScript 代码，定义组件逻辑。组件模板用 HTML 编写，用于定义组件的用户界面。

让我们创建一个名为以下组件的组件MyComponent.astro：

<input type="text" placeholder="Type your text here..." />

<button>Send</button>
Enter fullscreen mode Exit fullscreen mode

这是一个简单的组件，它是一个表单组件，包含一个输入框和一个按钮。这是一个可复用的组件，可以在项目的任何位置使用。

让我们看看如何在我们的项目中使用它：

---
import MyComponent from '../components/MyComponent.astro';
---

<MyComponent />
Enter fullscreen mode Exit fullscreen mode

假设我们要给组件中的按钮添加点击事件MyComponent。我们知道事件处理程序将是一个函数，而这个函数是 JavaScript 代码。所以首先，我们需要在组件中添加一个 script 标签。这可以通过--在组件文件的顶部添加双破折号 (-) 来实现。然后，我们将 JavaScript 代码写入 script 标签中。

---
function handleClick() {
  console.log('Button clicked!');
}
---
<input type="text" placeholder="Type your text here..." />

<button onclick="{handleClick}">Send</button>
Enter fullscreen mode Exit fullscreen mode

我们为按钮添加了点击事件处理程序。handleClick当按钮被点击时，该函数将被调用，handleClick并将日志输出Button clicked!到控制台。

将属性传递给组件

在任何面向组件的框架中，Props 都是最重要的特性之一。Props 用于在组件之间传递数据，这使得组件可以重用和组合。

我们来看看如何向 Astrojs 组件传递 props。我们想向MyComponent组件传递一个按钮文本。我们将通过如下方式渲染组件来实现：

---
import MyComponent from '../components/MyComponent.astro';
---

<MyComponent buttonText="Send" />
Enter fullscreen mode Exit fullscreen mode

这buttonText="Send"是将 props 传递给组件的方式。`name`buttonText是 prop 的名称，` Sendvalue` 是 prop 的值。prop 的名称和值之间用等号分隔=，并用双引号括起来"。任何 JavaScript 数据都可以通过 props 传递。

让我们看看MyComponent组件将如何接收该属性：

---
const { buttonText } = Astro.props;
---
<input type="text" placeholder="Type your text here..." />

<button>{buttonText}</button>
Enter fullscreen mode Exit fullscreen mode

因此，组件buttonText会接收到该 prop MyComponent。该 prop 会从Astro.props对象中解构出来。然后，该 prop 会在组件模板中使用。

该Astro对象在所有组件中均可用，Astrojs 会将传递给特定组件的所有 props 放入该组件的Astro.props对象中。每个组件的 Astro 对象实例都是唯一的。

处理静态和动态内容

将内容传递给组件

有时我们需要在组件的标签之间渲染元素：

<MyComponent>
  <p>My component!</p>
</MyComponent>
Enter fullscreen mode Exit fullscreen mode

由于组件中的代码MyComponent，该元素<p>My component!</p>将无法渲染。这是因为组件模板中没有用于渲染内容的位置。我们将向slot组件模板添加一个元素：

---
const { buttonText } = Astro.props;
---
<input type="text" placeholder="Type your text here..." />

<button>{buttonText}</button>

<slot />
Enter fullscreen mode Exit fullscreen mode

Astrojs 会将该元素渲染<p>My component!</p>到原元素的位置slot。

Astrojs 允许我们为插槽命名，以便我们可以在特定的插槽中渲染内容。假设我们想在模板的开头渲染内容，在模板的结尾渲染页脚。我们可以将插槽命名header为footer：

---
const { buttonText } = Astro.props;
---
<slot name="header">
<input type="text" placeholder="Type your text here..." />

<button>{buttonText}</button>

<slot name="footer" />
Enter fullscreen mode Exit fullscreen mode

现在，我们可以在页眉和页脚位置渲染内容了：

<MyComponent>
  <p slot="header">My component!</p>
  <p slot="footer">My component!</p>
</MyComponent>
Enter fullscreen mode Exit fullscreen mode

在Astro中管理数据

数据管理是 Web 开发的关键环节，Astro.js 提供了强大的数据获取和使用功能，可帮助您在项目中高效地获取和利用数据。在本节中，我们将探讨 Astro.js 提供的各种数据管理功能，包括从外部数据源或 API 获取数据，以及在 Astro 模板和组件中使用这些数据。

从外部来源或 API 获取数据

Astro.js 为我们提供了从外部数据源或 API 获取数据的灵活性。我们可以充分利用 JavaScript 的强大功能来执行数据获取操作，并将获取的数据无缝集成到您的 Astro 项目中。

HTTP 请求
我们可以使用流行的 JavaScript 库（例如Astro.js 中的fetch库）来发送 HTTP 请求axios。这些库提供了便捷的方法来向外部 API 发送 GET、POST、PUT、DELETE 和其他类型的请求。通过利用这些库，我们可以从各种来源检索数据，包括 RESTful API、GraphQL 端点，甚至是自定义后端服务器。

数据获取库Astro.js 也与诸如或 等
数据获取库很好地集成。这些库提供了缓存、自动重新验证和错误处理等附加功能，可以极大地简化我们在 Astro 项目中获取和管理数据的过程。swrreact-query

无服务器函数
在 Astro.js 中获取数据的另一种方法是使用无服务器函数。这些函数在服务器端运行，允许我们从外部数据源获取数据或执行任何必要的服务器端处理。Astro.js 无缝支持无服务器函数，使我们能够在构建过程中动态检索数据并将其传递给 Astro 组件。

---
import { getPosts } from '../lib/posts';
const posts = getPosts();
---

{posts.map((post) => (
  <div>
    <h2>{post.title}</h2>
    <p>{post.body}</p>
  </div>
))}
Enter fullscreen mode Exit fullscreen mode

一旦我们获取了所需的数据，Astro.js 就能让我们将其无缝集成到您的模板和组件中，从而实现动态渲染和数据驱动的用户界面。

借助 Astro.js 提供的数据管理功能，我们可以轻松地从外部数据源或 API 获取和使用数据，从而创建动态的、数据驱动的网站或应用程序。无论您需要展示博客文章、填充产品信息还是展示实时数据，Astro.js 都提供了一套功能全面的工具包，用于管理项目中的数据。

结论

本文涵盖了 Astro.js 的诸多基础知识。我们首先介绍了如何安装 Astro.js 并创建一个新项目。然后，我们了解了项目结构以及如何运行项目。接下来，我们学习了 Astro.js 模板语法以及如何创建组件。此外，我们还探讨了如何向组件传递 props，以及如何在组件中渲染静态和动态内容。最后，我们还介绍了如何从外部数据源或 API 获取数据。

文章来源：https://dev.to/refine/getting-started-with-astro-framework-2f2f
带有自定义样式的 ReactCal...
如何在 Angular 组件之间共...