大家好，我是 RayChart，vfit.js、raychart.js 作者，8 年专注 Vue3 大屏适配、Web3D、数字孪生、数据可视化实战开发，长期分享可直接落地的前端效率工具与实战教程。

每次接到 1920×1080 标准大屏设计稿，最让人头疼的永远是适配：
rem 要不停换算、百分比布局易乱、手动 scale 要写一堆监听与居中逻辑，坑多还容易出bug。

今天给大家带来我自研的 Vue3 轻量大屏适配库 —— vfit，真正做到：
不用计算、不用换算、不用调复杂布局，3 分钟接入，设计稿写多少 px，代码就写多少。

一、3 分钟极速接入（复制即用）

1. 安装依赖

npm install vfit

2. 全局配置（main.ts）

import { createApp } from 'vue'
import App from './App.vue'
import { createFitScale } from 'vfit'
import 'vfit/style.css' // 必须引入，否则组件失效

const app = createApp(App)

app.use(createFitScale({
  target: '#app',
  designWidth: 1920,    // 设计稿宽度
  designHeight: 1080,   // 设计稿高度
  scaleMode: 'auto'     // 自动适配模式，直接用
}))

app.mount('#app')

配置完成，你的页面已经具备自动等比缩放 + 窗口居中能力，任意拖拽窗口都不会变形、不会错位。

二、核心神器：FitContainer 精准定位

做大屏最痛的不是缩放，而是组件坐标还原。
vfit 提供的 <FitContainer> 组件，直接解决 90% 布局痛点：

设计稿 30px → 代码直接写 30，无需任何比例计算

<template>
  <div class="screen-wrapper">
    <!-- 标题：水平居中 -->
    <FitContainer :top="50" :left="0" :right="0">
      <h1 style="text-align: center">数据可视化大屏</h1>
    </FitContainer>

    <!-- 左侧图表：直接使用设计稿坐标 -->
    <FitContainer :top="100" :left="30">
      <ChartComponent />
    </FitContainer>

    <!-- 右侧列表：吸附边缘，自动适配 -->
    <FitContainer :top="100" :right="30">
      <ListComponent />
    </FitContainer>
  </div>
</template>

核心优势

• 支持 top / left / right / bottom / z 五维定位
• 自动按设计稿比例计算位置
• 4K 屏、笔记本屏、拼接屏效果完全一致
• 无需媒体查询、无需 rem、无需手写 CSS 计算

三、实战避坑指南（必看）

1.  样式必须引入
   忘记引入 vfit/style.css 会导致 FitContainer 失效，布局直接混乱。
2.  层级冲突处理
   FitContainer 默认有层级，弹窗被覆盖时可手动指定：

<FitContainer :z="999">

3.  right / bottom 特殊逻辑

• left：按设计稿比例自动缩放
• right：不乘缩放，保持吸附屏幕边缘
  专为大屏展示优化，视觉更稳定。

四、适用场景

• Vue3 数据可视化大屏
• 数字孪生项目
• 监控中心、控制台页面
• 多端自适应、拼接屏项目
• 不想写复杂适配逻辑的前端项目

vfit 不是功能最繁杂的，但最简单、最稳定、最适合生产环境，让你把时间花在 ECharts、3D 渲染、业务逻辑上，而不是算像素。

五、项目资源

GitHub：github.com/v-plugin/vf…
官方文档：vfit.raychart.cn

🎁 粉丝专属福利

关注我的微信公众号 RayChart
后台回复关键词：vfit
立即免费领取：
✅ vfit 完整可运行项目模板
✅ 10 套大厂可视化大屏源码
✅ 数字孪生项目素材包
✅ 一对一技术问题答疑

公众号持续更新：Vue3 大屏适配、Web3D、3D 模型压缩、全景预览、自研效率工具、数字孪生实战干货，所有内容均可直接复制到项目使用。