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

萌萌哒草头将军2023-08-31 0:05

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

🎉 什么是 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 语法。

🎉 最后

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

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

相关推荐
volodyan1 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^10 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang14 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘42 分钟前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫5 小时前
JavaScript（JS）学习笔记 1（简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组）
javascript·笔记·学习
everyStudy5 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步6 小时前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
Bug缔造者6 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习