vue大屏数据可视化自适应,vue大屏可视化
最近，当我用VUE写一个大屏幕页面时，我遇到了屏幕适配的问题。下面文章主要介绍vue大屏适配的实现方法，通过示例代码详细介绍。有需要的朋友可以参考一下。
目录
前言大屏第一步：先下载包，这里用lib-flexible和postcss-pxtorem。第二步：引入main.js第三步：修改lib-flexible源文件的配置。第四步：在vue.config.js中配置第五步：在vue.config.js的同一级别新建一个postcss.config.js，最后重新NPP。
前言
第一次接触大屏幕，领导给了我一个适应屏幕大小的任务，然后我就去百度hhhh。看了很多版本，差别很大，就自己总结了一个文案。可以用护士式的教程，手把手教，直接cv。这种方法也可以用于移动自适应。只需要将postcss.config.js文件中的大小改为移动端的设计稿大小/10即可。移动端没有实践。
大屏
第一步：先下包，这里用到lib-flexible和postcss-pxtorem
如果直接下载postcss-pxtorem会得到错误，所以这里我们下载指定版本的postcss-pxtorem@5.1.1。
Npm下载
npm安装库-灵活-保存-开发
Postcss-pxtorem:自动将px转换为rmm
npm安装postcss-pxtorem@5.1.1 - save-dev
纱线下载
纱线添加库-灵活
纱线添加postcss-pxtorem@5.1.1
第二步：在main.js引入
导入灵活库
第三步：修改lib-flexible源文件配置
修改lib中的flexible . js-node _ modules中的flexible，找到要修改的refreshRem函数：
函数refreshRem(){
var width=docel . getboundingclientrect()。宽度；
如果(宽度/dpr 540) {
宽度=540 * dpr
}else if(width/dpr 1980){
宽度=1980 * dpr
}
var rem=宽度/10；
docel . style . font size=rem px ；
flexible . rem=win . rem=rem；
}
注意：你只需要在这里修改屏幕的最大和最小宽度(540和1980)。
第四步：在vue.config.js里配置
模块.导出={
css: {
sourceMap:假的，
loaderOptions: {
css: {
//此处的选项将被传递给css-loader
},
postcss: {
//此处的选项将被传递给postcss-loader
},
},
},
}
第五步：在vue.config.js同级新建postcss.config.js
模块.导出={
插件：{
postcss-pxtorem :
rootValue: 192，
propList: [* ，
},
},
}
注：此处的rootValue可基于设计草图的大小/10。
最后重新 npm run dev 或 yarn dev就ok啦
但是需要注意的是，如果删除了node_modules的依赖关系，重新下载后仍然需要修改配置文件。
总结
关于vue大屏自适应实现的这篇文章到此为止。更多相关vue大屏适配内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。