🚀🚀🚀Astro：一个可以同时写React、Vue、Svelte、SolidJS等多种语言的框架

发布于

🎉 什么是 Astro

Astro 是「集多功能于一体的 Web 框架」，用于构建「快速、以内容为中心」的网站。

🎉 主要特性

  1. 「以内容为中心」：Astro 专为内容丰富的网站而设计。
  2. 「服务器优先」：网站在服务器上渲染 HTML 时运行速度更快。
  3. 「默认快速」：在 Astro 中构建缓慢的网站是不可能的。
  4. 「易于使用」：您不需要成为专家即可使用 Astro 构建某些内容。
  5. 「功能齐全且灵活」：超100多种 Astro 集成可供选择。

说人话：默认服务端渲染、没有JavaScript，所以很快；可以集成多种框架

Astro 的目标是构建内容（静态网站），而不是web APP级别的应用。

🎉 安装

代码语言：javascript
复制
// 全局安装
npm i -g astro
// 初始化项目
npm create astro@latest

接着根据提示回车即可

🎉 语法

🚀 类似 jsx的表达式的 HTML 超集

「Astro 组件」是 Astro 项目的基础构建块。它们是纯 HTML、无需客户端运行时的模板组件。你可以通过文件扩展名 .astro 来写 Astro 组件。

vscode 中可以使用 Astro 插件进行代码高亮

如果组件种需要 JavaScript ，那么你可以在代码栅栏、script 标签等方式加入 JavaScript 代码。

代码语言：javascript
复制
---
// 组件脚本（JavaScript）
---
<!-- 组件模板（HTML + JS 表达式）-->

「Astro 组件语法」采用类似jsx的写法，不过他们还是有一些区别

💎 区别1：属性采用 html 语法
代码语言：javascript
复制
- <div className="box" dataValue="3" />
+ <div class="box" data-value="3" />
💎 区别2：没有根元素限制
代码语言：javascript
复制
---
// 包含多个元素的模板
---
<p>无需将元素包装在单个容器元素中。</p>
<p>Astro 支持模板中的多个根元素。</p>
💎 区别3：多种注释写法
代码语言：javascript
复制
---
---
<!-- HTML 注释语法在.astro 文件中是有效的 -->
{/* JS 注释语法也是有效的 */}

🚀 模板语法

💎 定义变量
代码语言：javascript
复制
---
const name = "Astro";
---
<div>
  <h1>你好 {name}!</h1>  <!-- 输出 <h1>Hello Astro!</h1> -->
</div>

💎 动态属性
代码语言：javascript
复制
---
const name = "Astro";
---
<h1 class={name}>支持属性表达式</h1>

<MyComponent templateLiteralNameAttribute=`} />
💎 Fragment 片段
代码语言：javascript
复制
---

const htmlString = '<p>Raw HTML content</p>';

<Fragment set:html= />

<>helloe!!!</>
💎 动态标签
代码语言：javascript
复制
---

import MyComponent from "./MyComponent.astro";

const Element = 'div'

const Component = MyComponent;

<Element>Hello!</Element> <!-- 渲染成 <div>Hello!</div> -->

<Component /> <!-- 渲染成 <MyComponent /> -->
💎 CSS 样式

Astro <style> 标签内的 CSS 规则「默认自动限定范围」。即仅当前组件有效

代码语言：javascript
复制
<style>

h1 {

color: red;

}


.text {

color: blue;

}

</style>

如果你想全局生效，需要使用指令

代码语言：javascript
复制
<style is:global>

h1 {

color: red;

}


.text {

color: blue;

}

</style>
💎 Script 标签

Astro 允许你不使用任何框架，那么将会严格按照 html 进行编译，此时，此时你可以使用 script 标签处理事件，包括点击事件。

代码语言：javascript
复制
// <button class="alert" onClick={onClick}>Click me!</button>

// 上面的点击写法是无效的


<button class="alert">Click me!</button>


<script>

// 在页面上找到所有带有 alert 类的按钮。

const buttons = document.querySelectorAll('button.alert');


// 处理每个按钮上的点击事件。

buttons.forEach((button) =>);

});

</script>
💎 指令
👉 class:list

class:list 接收数组，其中有几种不同的可能值：

  • string：添加到 class 元素
  • Object：添加到键值对到 class 元素
  • Array：扁平化
  • false, null, or undefined: skipped
代码语言：javascript
复制
<!-- 原先 -->

<span class:list=, [ 'friend' ] ]} />

<!-- 输出 -->

<span class="hello goodbye world friend"></span>
👉 set:html

set:html= 将 HTML 字符串注入元素中，类似于设置 el.innerHTML

代码语言：javascript
复制
---

const rawHTMLString = "Hello <strong>World</strong>"

<h1>{rawHTMLString}</h1>

<!-- 输出：<h1>Hello &lt;strong&gt;World&lt;/strong&gt;</h1> -->

<h1 set:html={rawHTMLString} />

<!-- 输出：<h1>Hello <strong>World</strong></h1> -->
👉 set:text

set:text={string} 将文本字符串注入元素中，类似于设置 el.innerText。

👉 客户端指令

默认情况下，UI 框架组件不会在客户端激活。如果没有 client:* 指令，它的 HTML 将被渲染到页面上，而无需 JavaScript。

  • client:load 立即加载并激活组件的 JavaScript。
  • client:idle 一旦页面完成了初始加载，并触发 requestIdleCallback 事件，就会加载并激活组件中的 JavaScript
  • client:visible 一旦组件进入用户的视口，就加载组件的 JavaScript 并使其激活
  • client:media 一旦满足一定的 CSS 媒体查询条件，就会加载并激活组件的 JavaScript。
  • client:only 跳过 HTML 服务端渲染，只在客户端进行渲染
代码语言：javascript
复制
<BuyButton client:load />


<ShowHideButton client:idle />


<HeavyImageCarousel client:visible />


<SidebarToggle client:media="(max-width: 50em)" />


<SomeReactComponent client:only="react" />

<SomePreactComponent client:only="preact" />

<SomeSvelteComponent client:only="svelte" />

<SomeVueComponent client:only="vue" />

<SomeSolidComponent client:only="solid-js" />

🚀 集成第三方框架

💎 安装集成组件
代码语言：javascript
复制
npx astro add react

在 astro.config.mjs 配置文件中添加如下

代码语言：javascript
复制
import { defineConfig } from 'astro/config';


import react from "@astrojs/react";


// https://astro.build/config

export default defineConfig({

integrations: [react()]

});
💎 添加组件

定义 React 组件

代码语言：javascript
复制
import React from "react"

import { useState } from "react"


const ReactComponent = () => {

const [count, setCount] = useState(0)

return <div onClick={() => setCount(count + 1)}>React：{count}</div>

}


export default ReactComponent

引入组件

代码语言：javascript
复制
---

import Layout from '../layouts/Layout.astro';

import ReactComponent from "../components/ReactComponent";

<Layout title="Welcome to Astro.">

<main>

<ReactComp client:load></ReactComp>

</main>

</Layout>

其他框架的流程类似

❝ 只有在 .astro 文件中才可以使用多种框架的语言
❞

下面是我添加的 react、vue 框架的 count 功能组件：

🎉 总结

Astro 是一个以内容为中心的框架，默认服务端渲染，尽量没有JavaScript，所以速度很快。

Astro 除了可以集成流行的框架之外，还对标准的 markdown 语法内置支持。包括 frontmatter YAML 语法。

🎉 最后

今天的分享就到这里了，感谢大家的阅读，如果文中有错误的地方，欢迎指正！

#react#svelte#sveltekit#javascript#vue.js