vue 数据大屏

又是取名的一天

已于 2023-11-17 15:05:15 修改

阅读量150

点赞数

文章标签： vue.js

于 2023-11-17 14:57:54 首次发布

本文链接：https://blog.csdn.net/m0_70752874/article/details/134463293

版权

Vue2与Vue3—引入DataV-CSDN博客

一、文档参考
vue2使用DataV文档
vue3使用DataV文档
二、开始
1、npm安装DateV
支持npm、pnpm、yarn
V2：
npm install @jiaminghi/data-view

V3：
npm install @kjgl77/datav-vue3
2、全局引入DataV
// main.ts中全局引入
v2:
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

v3:
import DataVVue3 from '@kjgl77/datav-vue3'
app.use(DataVVue3)
三、可能报错再现
（1）问题一

解决：将 :key = "i" 剪贴到上面template 中，如下

（2）问题二

解决方法： Vue3 datav报请求模块错误 · Issue #I4DHV2 · upholdjx/vue-datav-chart - Gitee.com
原文链接：https://blog.csdn.net/qq_55682738/article/details/132141771

jiaminghi/data-view是什么？（DataV，dv大屏数据可视化开源组件库）

简述：相信大家在平时工作中，难免会遇到开发大屏的需求，页面中有很多比较炫酷的CSS效果。这里给大家推荐一款大屏数据展示组件库，里面有各种边框、装饰、图标、飞线图、水位图、轮播表等等，支持vue和react，有很多炫酷效果，下面给大家介绍一下；

具体使用方法：
1、安装

//npm安装
npm install @jiaminghi/data-view

//yarn安装
yarn add @jiaminghi/data-view
2、引入

//全局引入组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

//按需引入组件
import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)
3、使用（直接复制标签使用）；

4、下面这款Vue的开源大屏就有不少样式使用的就是，DataV，仅供参考；

该项目开源地址：

Vue大屏
https://gitee.com/MTrun/big-screen-vue-datav#https://gitee.com/MTrun/go-view

更多炫酷效果，详见DataV官网：

DataV官网
http://datav.jiaminghi.com/guide/
————————————————
原文链接：https://blog.csdn.net/weixin_65793170/article/details/129285248