还在手动拼 div、调宽高、改圆角、对齐像素？
页面一改，骨架屏全废；框架不通用，Vue 一套 React 一套；还原度差、错位、维护噩梦——这些历史，Boneyard 直接终结。
它不是传统骨架屏组件，而是**“从真实 UI 快照 → 自动生成骨骼数据 → 运行时渲染”的全链路工具**。
最新版 v1.7+，Vue3 官方适配、React/Preact/Svelte/Angular/React Native 全支持，像素级 1:1 还原，零手写骨架代码。
一、Boneyard 到底强在哪？
1. 真实 DOM 快照，像素级还原（核心）
不是猜布局、不是模板化，而是启动无头浏览器（Playwright）扫真实页面：
- 捕获所有元素的 x/y/宽高/圆角
- 自动扁平化，生成
.bones.json骨骼数据 - 运行时只渲染骨骼矩形，和原布局完全一致
2. 全框架统一方案（Vue/React/全栈）
官方原生支持：
- React / Preact
- Vue3（v1.7+ 正式适配）
- Svelte 5
- Angular
- React Native
3. 构建时生成，运行时零开销
- 开发/构建阶段执行一次
build，生成骨骼数据 - 运行时只渲染矩形，无 DOM 扫描、无性能损耗
- 打包体积极小，不影响首屏速度
4. 高度可定制 + 暗黑模式
- 自定义颜色、圆角、波纹动画、时长
- 自动适配暗黑模式（
prefers-color-scheme） - 支持忽略指定元素（广告、页脚）
5. 一次生成，全站复用
- 按
name命名骨骼，跨页面复用 - 组件更新后，重新
build即可同步
二、正确保姆级教程（Vue3 为例）
1. 安装依赖（官方包：boneyard-js）
# npm
npm install boneyard-js
# yarn
yarn add boneyard-js
# pnpm
pnpm add boneyard-js
2. 业务组件包裹（Vue3）
在你的页面/组件外，用 <Skeleton name="xxx" :loading="xxx"> 包裹真实内容：
<template>
<!-- name：骨骼唯一标识；loading：是否显示骨架 -->
<Skeleton name="profile-card" :loading="isLoading">
<!-- 你的真实业务 UI -->
<div class="card">
<img src="avatar.jpg" />
<h3>张三</h3>
<p>前端开发工程师</p>
</div>
</Skeleton>
</template>
<script setup>
import { ref } from 'vue'
// 从 boneyard-js/vue 导入，不是 boneyard-ui！
import Skeleton from 'boneyard-js/vue'
const isLoading = ref(true) // 接口加载中
</script>
name必须唯一（如profile-card、blog-list）loading控制显示骨架/真实内容
3. 全局注册骨骼（入口 main.ts）
在 main.ts 里导入一次 registry，全站骨骼自动注册：
import { createApp } from 'vue'
import App from './App.vue'
// 关键：导入骨骼注册表（build 后自动生成）
import './bones/registry'
createApp(App).mount('#app')
（bones 文件夹是 build 后自动生成的，不用手动建）
4. 启动项目 + 生成骨骼（核心命令）
第一步：启动你的 Vue 项目
npm run dev
# 假设地址：http://localhost:5173
第二步：新开终端，执行 build 命令（快照生成骨骼）
npx boneyard-js build http://localhost:5173
- 自动启动无头浏览器，访问你的页面
- 扫描所有
<Skeleton name="xxx">区域 - 生成
.bones.json+registry.ts到./bones - 全程自动，5 秒搞定一个页面
5. 运行时查看效果
- 保持
isLoading = true→ 显示像素级还原的骨架屏 - 接口加载完成 →
isLoading = false→ 显示真实 UI - 支持波纹动画、自定义颜色：
<Skeleton
name="profile-card"
:loading="isLoading"
color="#f0f0f0"
:radius="8"
wave
:duration="1.5"
>
<!-- 真实内容 -->
</Skeleton>
6. React 快速示例
import { useState } from 'react'
import { Skeleton } from 'boneyard-js/react'
function BlogPage() {
const [isLoading, setIsLoading] = useState(true)
return (
<Skeleton name="blog-card" loading={isLoading}>
<div className="blog-card">
<h2>Boneyard 教程</h2>
<p>全自动骨架屏生成工具</p>
</div>
</Skeleton>
)
}
生成命令同上：npx boneyard-js build http://localhost:3000
三、总结：骨架屏开发，正式进入“零代码自动化”时代
Boneyard 不是优化了骨架屏，而是重新定义了骨架屏的开发方式：
- ✅ 真实 UI 快照，像素级还原，告别错位
- ✅ 全框架统一，Vue/React/Svelte/Angular 全覆盖
- ✅ 构建时生成，运行时零开销，性能拉满
- ✅ 高度可定制，暗黑模式/动画/颜色自由调
- ✅ 一次生成，全站复用，维护成本降 90%
现在开始，不用再手写任何骨架屏代码，两行命令，全自动搞定
你之前手写骨架屏踩过哪些坑？评论区聊聊！
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
