介绍
Astro是一个基于JavaScript的静态站点生成器, 和Hexo有点类似,  支持Markdown构建内容, 但Astro性能会更好, 它具有独特的岛屿架构,按需加载JS,能显著减少初始加载时间, 非常适合需要快速首屏加载的场景比如如博客、营销网站、企业官网等等
Astro官网: 点击进入
环境搭建
这里以MacOs平台为例:
- 安装 - npm- 1 - brew install npm 
- 安装 - nodejs- 这里指定 - nodejs版本为v18- 1 - npm install -g n - 然后 - 1 - n v18 
开始
- 创建工程模板 - 1 - npm create astro@latest 工程名称  - 根据提示一步步往下走即可  - 完成后会在当前目录生成工程文件夹, 目录如下:  
- 运行工程 - 1 - npm run dev - 开启调试, 此时在浏览器地址栏输入 - http://localhost:4321/即可实时访问 
- 打包静态文件 - 工程编写完毕后, 即可输出网站静态文件 - 1 - npm run build - 执行完毕后, 在工程目录下会自动生成 - dist文件夹 - 将 - dist目录下的所有文件上传到你的静态服务器上就可访问了
Astro与React结合
Astro不仅可以和vue结合使用 还可以和React结合, 这里做一个简单Tailwind风格的网站演示
- 创建项目 - 1 - npm create astro@latest my-toolbox -- --template framework-react 
- 安装依赖 - 1 
 2
 3- cd my-toolbox 
 npm install @astrojs/tailwind tailwindcss react-dnd react-dnd-html5-backend
- 初始化 - Tailwind- 1 - npx tailwindcss init -p 
- 配置 - Tailwind.config.js- 1 
 2
 3
 4
 5
 6
 7- export default { 
 content: ['./src/*/.{astro,js,jsx,ts,tsx}'],
 theme: {
 extend: {},
 },
 plugins: [],
 }
- 配置 - astro.config.mjs- 1 
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20- import { defineConfig } from 'astro/config'; 
 import react from '@astrojs/react';
 import tailwind from '@astrojs/tailwind';
 export default defineConfig({
 integrations: [
 react(),
 tailwind({
 config: {
 applyBaseStyles: false,
 },
 }),
 ],
 server: {
 port: 3000,
 },
 build: {
 format: 'file',
 },
 });
- 编写主页 
- 工作流页面 
- 工具注册中心 
工程目录结构介绍
以下是示例
| 1 | src/ | 
本文为作者原创 转载时请注明出处 谢谢
