介绍

Astro是一个相对较新的web框架,它可以帮助你轻松地建立快速干净的网站。Astro能够与目前主流的JavaScript前端框架一起工作,如React,
Vue或solid。

终端用户喜欢网站快速展示,但开发人员喜欢用复杂的JavaScript框架来构建网站。

Astro就像一个静态端生成器,试图在服务器端生成一个静态版本的网站,并减少发送到客户端的代码量,使之尽可能少。这有助于使网站非常快。同时Astro允许您使用自己喜欢的框架,甚至同时使用多个框架来构建网站。

astro具有以下主要功能:

  • 服务器优先的API设计:把复杂的交互从终端页面上移除。
  • 组件岛:一个新的网络架构,以建立更快的网站,这些组件岛指的是HTML静态页面上的交互式UI组件。一个页面上可以存在多个岛,一个岛始终是孤立呈现的。为了保持对页面速度的影响尽可能低,Astro使它能够在需要时只加载那些网页的部分。
  • 默认情况下为零JS:没有JavaScript运行时开销来降低您的速度,默认情况下Astro在发送给客户端的输出中不添加JavaScript代码。这使你的网站超快,并尽可能减少捆绑大小。
  • 可定制:你可以通过 React, Svelte, Vue, Tailwind CSS, MDX, image optimizations等100多个集成 扩展 Astro 只需要一个命令 即可连接您喜欢的CMS 或 部署到您喜欢的服务器。
  • ui不可知:这意味着您可以自带UI框架(BYOF)。React、Preact、Solid 、Svelte、Vue和 Lit都在Astro中得到官方支持。您甚至可以在同一页面上混合和匹配不同的框架,使未来的迁移更容易,并防止项目锁定到单个框架。

实现网站demo

html+css+javascript的源码在:https://github.com/kylvia/astro-started-website/tree/main/static-common
效果展示:
https://sparkly-raindrop-84e1a5.netlify.app/

前期准备

编辑器:vscode 。插件: Astro、Tailwind CSS IntelliSense

构建您的第一个Atro项目

  1. 简单跟随 create-astro CLI 指引,很快就能在本地启动并运行新项目!
# 使用 pnpm 创建新项目 (本项目以pnpm为例)
pnpm create astro@latest
  1. 目录和文件
    Astro 为你的项目提供了一个有想法的文件夹布局。每个 Astro 项目的根目录下都应该包括以下目录和文件:
  • src/* - 你的项目源代码(组件、页面、样式等)。
  • public/* - 你的非代码、未处理的资源(字体、图标等)。
  • package.json - 项目列表。
  • astro.config.mjs - Astro 配置文件(可选)。
  1. 集成tailwind CSS
pnpm astro add tailwind
  1. 根据demo项目,先确立组件和路由页面
    在这里插入图片描述

  2. 基本使用介绍
    在这里插入图片描述

  3. 页面公共框架BasicLayout
    在这里插入图片描述

  4. 页面实现
    在这里插入图片描述
    更多的本项目的实现及部署见:B站 是阿狸呀

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐