--- theme: serene-rose highlight: dracula --- 一入前端深似海，不持续学习真的要被淘汰啊！这不，最近 Astro 发布了 3.0，我怀着好奇的心去看了一下，的确是个不错的框架。这个框架目前在 GitHub 上已经获得了 35k+的 star，可以算得上是一个热门的框架。里面提到的“Astro 群岛”的 Web 架构模式也非常有意思。 ## Astro 是什么 Astro 是一款集多功能于一体的 Web 框架，旨在构建快速且以内容为中心的网站。"以内容为中心"的定义是指那些内容丰富的网站，例如大多数营销网站、出版网站、文档网站、博客、个人作品集以及某些电子商务网站。在构建此类网站时，Astro 拥有一些独特的优势。 Astro 采用的是服务端渲染，与 Next.JS、SvelteKit、Nuxt、Remix 等服务端渲染框架相似。然而，与其他框架构建的单页应用程序（SPA）不同，Astro 构建的是多页应用程序（MPA），这也是 Astro 具备快速性的原因之一。此外，Astro 容易学习上手，不需要太多对新技术的压力。它原生支持 React、Preact、Svelte、Vue、Solid、Lit 等热门框架组件，并且其文档非常详细，通过逐步实例指导用户如何应用。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43b6acf2339d472eae7a450dcc81ef90~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2880\&h=1800\&s=779268\&e=png\&b=211e31) ## 创建 Astro 项目在使用 Astro 之前，请确保您的环境中安装了 Node.js 的版本不低于 18.14.1。 ### 安装 ```sh # 使用 npm npm create astro@latest # 使用 pnpm pnpm create astro@latest # 使用 yarn yarn create astro # 使用 bun bun create astro ``` ### 启动服务 ```sh npm run dev pnpm run dev yarn run dev bun run dev ``` 下面是选用博客模板的效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85c0b3abbc9a44a69142a715b9d27389~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2880\&h=1800\&s=2274168\&e=png\&b=ffffff) ## Astro 语法 Astro 以`.astro`后缀命名，语法与 JSX 语法相似。 ```jsx --- const pageTitle = "关于我"; const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"]; // 列表 const show = false; // 条件 --- Astro

{ pageTitle }

{skill}

{show &&

Astro 学习

} ``` 熟悉 JSX 语法的应该很快就上手了，不过也会有一点差异。 1. Astro 中 HTML 属性使用标准的短横线命名，而 JSX 中是驼峰式命名； ```html

``` 2. 组件不要求在单个标签`

`或`<>`内； 3. Astro 中可以使用标准的 HTML 注释或 JavaScript 风格的注释。 CSS 样式可以直接嵌套在 HTML 模板内。 ```html {pageTitle} ``` ## Vue 集成 Astro 支持多种不同前端框架的集成，以 Vue 为例。 ### 安装 `@astrojs/vue` ```sh # 使用 NPM npx astro add vue # 使用 Yarn yarn astro add vue # 使用 PNPM pnpm astro add vue # 使用 bun bun astro add vue ``` 下面是我安装过程的截图，它会自动帮你添加配置和依赖。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d0e682ec70348a1a739e29c3458b4aa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2242\&h=1378\&s=223487\&e=png\&b=1e1e1e) 我写了一个简单的 Vue 组件，然后导入到 Astro 的页面内。 ```html ``` 如图，正常显示 Vue 组件内容。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf5581088c904f21966e35c5b286c67b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2148\&h=918\&s=239210\&e=png\&b=f7f8fa) ## Astro 群岛 Astro 支持集成不同的 UI 框架，比如 React、Svelte 和 Vue。这一特性源自 Astro 架构模式的创新，被称为“Astro 群岛”或“组件群岛”。这种“群岛架构”最早是由 Etsy 前端架构工程师 Katie Sylor-Miller 在 2019 年的一次会议上提出的。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c0a1a3782364bab9c5d65d05effe0be~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1514\&h=1322\&s=89129\&e=png\&b=332f44) “Astro 群岛”指的是将交互性的 UI 组件嵌入到静态 HTML 中的技术。一个页面上可以有多个岛屿，每个岛屿都是独立呈现的。你可以将这些岛屿想象成在一个由静态（不可交互）HTML 页面中的动态岛屿。这个概念有些类似于我们常说的“微前端”。