🚀🚀🚀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 语法。

🎉 最后

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