Astro：一种独具特色的前端框架
进入前端领域如同沉浸在深深的海洋中，不持续学习真的会被时代淘汰！最近，Astro 发布了 3.0 版本，我怀着好奇的心态进行了了解，确实是一款出色的框架。Astro 在 GitHub 上已经获得了 35,000 以上的星，显然是备受瞩目的框架之一。它所倡导的“Astro 群岛”Web 架构模式也十分引人入胜。
Astro 是什么？
Astro 是一款集多功能于一体的 Web 框架，旨在构建快速且以内容为中心的网站。"以内容为中心"的定义是指那些内容丰富的网站，例如大多数营销网站、出版网站、文档网站、博客、个人作品集以及某些电子商务网站。在构建此类网站时，Astro 拥有一些独特的优势。
Astro 采用的是服务端渲染，与 Next.JS、SvelteKit、Nuxt、Remix 等服务端渲染框架相似。然而，与其他框架构建的单页应用程序（SPA）不同，Astro 构建的是多页应用程序（MPA），这也是 Astro 具备快速性的原因之一。此外，Astro 容易学习上手，不需要太多对新技术的压力。它原生支持 React、Preact、Svelte、Vue、Solid、Lit 等热门框架组件，并且其文档非常详细，通过逐步实例指导用户如何应用。
创建 Astro 项目
在使用 Astro 之前，请确保您的环境中安装了 Node.js 的版本不低于 18.14.1。
安装
# 使用 npm npm create astro@latest # 使用 pnpm pnpm create astro@latest # 使用 yarn yarn create astro # 使用 bun bun create astro
启动服务
npm run dev pnpm run dev yarn run dev bun run dev
下面是选用博客模板的效果：
Astro 语法
Astro 以.astro后缀命名，语法与 JSX 语法相似。
---
const pageTitle = "关于我";
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"]; // 列表
const show = false; // 条件
---
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content="{Astro.generator}" />
<title>Astro</title>
</head>
<body>
<h1>{ pageTitle }</h1>
<ul>
{skills.map((skill) => <li>{skill}</li>)}
</ul>
{show && <div>Astro 学习</div>}
</body>
</html>熟悉 JSX 语法的应该很快就上手了，不过也会有一点差异。
1. Astro 中 HTML 属性使用标准的短横线命名，而 JSX 中是驼峰式命名；
<!-- JSX --> <div className="box" dataValue="3" /> <!-- Astro --> <div class="box" data-value="3" />
2. 组件不要求在单个标签<div>或<>内；
3. Astro 中可以使用标准的 HTML 注释或 JavaScript 风格的注释。
CSS 样式可以直接嵌套在 HTML 模板内。
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
<!-- CSS -->
<style>
h1 {
color: purple;
font-size: 4rem;
}
</style>
</head>
</html>Vue 集成
Astro 支持多种不同前端框架的集成，以 Vue 为例。
安装 @astrojs/vue
# 使用 NPM npx astro add vue # 使用 Yarn yarn astro add vue # 使用 PNPM pnpm astro add vue # 使用 bun bun astro add vue
下面是我安装过程的截图，它会自动帮你添加配置和依赖。
我写了一个简单的 Vue 组件，然后导入到 Astro 的页面内。
<script setup>
const content = 'Hello World!'
</script>
<template>
<div>{{ content }}</div>
</template>如图，正常显示 Vue 组件内容。
Astro 群岛
Astro 支持集成不同的 UI 框架，比如 React、Svelte 和 Vue。这一特性源自 Astro 架构模式的创新，被称为“Astro 群岛”或“组件群岛”。这种“群岛架构”最早是由 Etsy 前端架构工程师 Katie Sylor-Miller 在 2019 年的一次会议上提出的。
“Astro 群岛”指的是将交互性的 UI 组件嵌入到静态 HTML 中的技术。一个页面上可以有多个岛屿，每个岛屿都是独立呈现的。你可以将这些岛屿想象成在一个由静态（不可交互）HTML 页面中的动态岛屿。这个概念有些类似于我们常说的“微前端”。
web前端
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式，其通过简单易懂的界面设计，让用户在游戏中体验到乐趣，同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 微信支付商户申请接入流程
微信支付，是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案，包括多种支付方式，如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
3. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料，包含：房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书（由于我们公司其中一区域已有注册另外一公司，所以必须需要承诺书）
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》，国家对非经营性互联网信息服务实行备案制度，对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似，同时微信小程序支持通过已认证的微信公众号进行注册申请，无需进行单独认证即可使用，同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情
