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. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情