Vue大屏可视化项目自适应

alert（“不想秃头”）

已于 2023-10-24 14:08:55 修改

阅读量2k

点赞数 2

文章标签： vue.js 前端 javascript 1024程序员节

于 2023-10-16 10:20:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46103732/article/details/133852728

版权

本文介绍了如何通过autofit.js工具简化大屏项目的自适应过程，包括npm引入、全局引入、在App.vue的mounted生命周期中配置和启用resize事件。只需几步即可实现大屏项目自动适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可视化大屏的需求越来越广泛，几乎所有的项目都要求自适应屏幕，传统的rem，vw、vh适配太繁琐且后期新增适配的话很麻烦。我们可以使用工具一键帮我们完成——autofit.js，下面是该插件的使用步骤：

1.npm引入autofit.js

npm i autofit.js

2.在App.vue文件中引入（全局使用）

import autofit from 'autofit.js'

3.在mounted生命周期中配置自适应代码

autofit.init({
        designHeight: 1080,  //项目初始的分辨率，一般就是你开发电脑的屏幕分辨率
        designWidth: 1920,  //项目初始的分辨率，一般就是你开发电脑的屏幕分辨率
        renderDom:"#app",   //App最外层的id名，一般都为app
        resize: true        //是否监听resize事件，默认是 true
    },false)

4.重启项目即实现大屏项目自动适配了