Astro学习使用记录

---

前言

Astro的出现
为了追求前端应用的性能与速度，近年前端界涌现出许多的解决方案，像SSR、SSG解决方案再到今天的island架构，他们的优化核心思路都是减少客户端Javascript工作负担将大多数渲染工作放在服务器端运行以优化用户首屏体验

---

Astro是什么？

Astro是一款基于island概念实现，为创建快且以内容为主的网站应用而生的MPA上层框架

---

问题记录

1. 使用组件库

使用 ELmentUIPlus 发现引入后无法正常使用js部分
需要在封装的组件引入使用时在属性中加入 client:only="vue"

<CardLeft client:only="vue" />

2. pages 目录下不要放 除 .astro 文件以外的文件

终端警告
Prefix filename with an underscore (_) to ignore.
需要将vue文件放到components目录下, 然后引入到 page 目录下

• 使用vue
• 使用tailwindcss

---

总结

适用于重内容轻交互的网站应用搭建，如：博客站点、营销站点、官方站点、文档站点、作品站点
适用于大多数对首屏渲染速度、TTI要求高，但整体页面交互不复杂的前端项目
适用于传统的内容站点，接入成本低并结合现代框架实现项目升级
但对于重数据、交互逻辑的应用，Astro不是第一选择