vue3 +vite+datav-vue3 可视化大屏，布局，墙裂！！！

zhangyubababa

已于 2023-03-13 15:50:20 修改

阅读量616

点赞数

分类专栏：前端文章标签： css css3 javascript

于 2023-02-03 00:52:16 首次发布

本文链接：https://blog.csdn.net/zhangyubababa/article/details/128859821

版权

本文介绍了使用Vue3、Vite和Datav-Vue3构建可视化大屏时的布局方法。重点在于dv-border-box-8元素的宽度处理，需要使用div包裹并应用flex布局。同时，文章提到了模块化导入图片的区别，Vite基于ES模块，而Vue CLI基于CommonJS。此外，还分享了B站黑马pink的解决方案，通过引入flexible插件自动将px转换为rem，优化移动端适配。

摘要由CSDN通过智能技术生成

https://datav-vue3.netlify.app/border/borderbox2/

<template>
  <div class="background">
    <dv-full-screen-container>
      <div class="flex-box">
        <div style="flex: 0 1 25%">
          <dv-border-box-3 style="width: 100%;height: 200px;">dv-border-box-1</dv-border-box-3>
          <dv-border-box-3 style="width: 100%;height: 200px;">dv-border-box-1