在 Astro 中构建您的界面：组件

ゝ一世哀愁。 2024-05-07 22:18 72阅读 0赞

### 概述 ###

每个前端框架都基于组件的概念：Vue、Angular、React 使用这个强大的功能来构建完整的应用程序。  
Astro 也不例外，在本文中我们将了解什么是组件以及如何在 Astro 项目中使用它。  
开始吧！ ?

### 什么是 Astro 组件？ ###

Astro 组件是可重用的代码片段，它们是纯 HTML 模板组件，没有客户端运行时。  
这些文件的扩展名是.astro.  
Astro 组件非常灵活，因为您可以通过不同的方式使用它们：

它可以在页面上包含一些可重用的 UI，例如页脚或导航栏。  
它可能包含一系列常用标签，使 SEO 易于使用。  
它甚至可以包含整个页面布局。  
重要的是要知道 Astro 组件不会在客户端上呈现，它可能在组件 frontmatter 中包含 JavaScript 代码，并且所有这些代码都将从发送到您使用的浏览器的最终页面中删除。

### 结构   Astro 组件由两个主要部分组成：脚本和模板。 ###

// Component Script (JavaScript or Typescript code)

您可以使用该脚本编写呈现模板所需的任何 JavaScript 代码，例如：

导入其他 Astro 组件  
导入其他框架组件，例如 Vue  
导入数据，例如 JSON 文件  
从 API 或数据库获取内容

import SomeAstroComponent from '../components/SomeAstroComponent.astro';
    import SomeReactComponent from '../components/SomeVueComponent.vue';
    import someData from '../data/data.json';
    
    const {
       
         title } = Astro.props;
    
    const data = await fetch('example/posts').then(r => r.json());

这种方法非常安全，因为在构建时，JavaScript 代码不会出现在最终用户的浏览器中。

### 相反，模板决定组件的 HTML 输出：如果您在此处编写纯 HTML，您的组件将在导入和使用的任何 Astro 页面中呈现该 HTML。   Astro 的组件模板语法还支持 JavaScript 表达式、 ###

// Your component script here!
    import Banner from '../components/Banner.astro';
    import VueCardComponent from '../components/VueCardComponent.vue';
    const myFavoriteFruits = [/* ... */];
    const {
       
         title } = Astro.props;
    ---
    
    <Banner