https://mp.weixin.qq.com/s/bJQaepBHFoii4Yir3-AICA

一入前端深似海，不持续学习真的要被淘汰啊！这不，最近 Astro 发布了 3.0，我怀着好奇的心去看了一下，的确是个不错的框架。这个框架目前在 GitHub 上已经获得了 35k+的 star，可以算得上是一个热门的框架。里面提到的“Astro 群岛”的 Web 架构模式也非常有意思。

h2
Astro 是什么
Astro 是一款集多功能于一体的 Web 框架，旨在构建快速且以内容为中心的网站。”以内容为中心”的定义是指那些内容丰富的网站，例如大多数营销网站、出版网站、文档网站、博客、个人作品集以及某些电子商务网站。在构建此类网站时，Astro 拥有一些独特的优势。

Astro 采用的是服务端渲染，与 Next.JS、SvelteKit、Nuxt、Remix 等服务端渲染框架相似。然而，与其他框架构建的单页应用程序（SPA）不同，Astro 构建的是多页应用程序（MPA），这也是 Astro 具备快速性的原因之一。此外，Astro 容易学习上手，不需要太多对新技术的压力。它原生支持 React、Preact、Svelte、Vue、Solid、Lit 等热门框架组件，并且其文档非常详细，通过逐步实例指导用户如何应用。

图片

h2
创建 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
下面是选用博客模板的效果：

图片

h2
Astro 语法
Astro 以.astro后缀命名，语法与 JSX 语法相似。

const pageTitle = “关于我”;
const skills = [“HTML”, “CSS”, “JavaScript”, “React”, “Astro”, “Writing Docs”]; // 列表

const show = false; // 条件

{ pageTitle }

{skills.map((skill) =>
• {skill}
)}

Astro 中 HTML 属性使用标准的短横线命名，而 JSX 中是驼峰式命名；