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

文章同步在公众号:萌萌哒草头将军,欢迎关注

🎉 什么是 Astro

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

🎉 主要特性

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

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

Astro 的目标是构建内容(静态网站),而不是web APP级别的应用。

🎉 安装

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

接着根据提示回车即可

🎉 语法

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

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

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

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

jsx 复制代码
---
// 组件脚本(JavaScript)
---
<!-- 组件模板(HTML + JS 表达式)-->

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

💎 区别1:属性采用 html 语法

jsx 复制代码
- <div className="box" dataValue="3" />
+ <div class="box" data-value="3" />

💎 区别2:没有根元素限制

jsx 复制代码
---
// 包含多个元素的模板
---
<p>无需将元素包装在单个容器元素中。</p>
<p>Astro 支持模板中的多个根元素。</p>

💎 区别3:多种注释写法

jsx 复制代码
---
---
<!-- HTML 注释语法在.astro 文件中是有效的 -->
{/* JS 注释语法也是有效的 */}

🚀 模板语法

💎 定义变量

jsx 复制代码
---
const name = "Astro";
---
<div>
  <h1>你好 {name}!</h1>  <!-- 输出 <h1>Hello Astro!</h1> -->
</div>

💎 动态属性

jsx 复制代码
---
const name = "Astro";
---
<h1 class={name}>支持属性表达式</h1>

<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />

💎 Fragment 片段

jsx 复制代码
---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />
<>helloe!!!</>

💎 动态标签

jsx 复制代码
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- 渲染成 <div>Hello!</div> -->
<Component /> <!-- 渲染成 <MyComponent /> -->

💎 CSS 样式

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

jsx 复制代码
<style>
  h1 {
    color: red;
  }

  .text {
    color: blue;
  }
</style>

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

jsx 复制代码
<style is:global>
  h1 {
    color: red;
  }

  .text {
    color: blue;
  }
</style>

💎 Script 标签

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

jsx 复制代码
// <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) => {
    button.addEventListener('click', () => {
      alert('按钮被点击了!');
    });
  });
</script>

💎 指令

👉 class:list

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

  • string:添加到 class 元素
  • Object:添加到键值对到 class 元素
  • Array:扁平化
  • false, null, or undefined: skipped
jsx 复制代码
<!-- 原先 -->
<span class:list={[ 'hello goodbye', { world: true }, [ 'friend' ] ]} />
<!-- 输出 -->
<span class="hello goodbye world friend"></span>
👉 set:html

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

jsx 复制代码
---
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

jsx 复制代码
👉 客户端指令

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

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

🚀 集成第三方框架

💎 安装集成组件

cmd 复制代码
npx astro add react

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

js 复制代码
import { defineConfig } from 'astro/config';

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  integrations: [react()]
});

💎 添加组件

定义 React 组件

jsx 复制代码
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

引入组件

jsx 复制代码
---
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 语法。

🎉 最后

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

下面是新框架尝鲜系列的文章:

相关推荐
foxhuli22933 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript