唠一唠

我的项目是vite-vue3-ts，在我尝试安装后就出现了各种的问题，比如：安装无法找到源码文件等；在网上经过一顿搜索终于让我找到了解决的办法。。。故此为了防止各位朋友出现和我一样的困惑，将适配vue2/vue3-vite-ts的安装方法集中整理，供各参考。

vue2+DataV

介绍

组件库基于Vue （React版 (opens new window)） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用：

• 边框

带有不同边框的容器

• 装饰

用来点缀页面效果，增加视觉效果

• 图表

图表组件基于Charts (opens new window)封装，轻量，易用

• 其他

Loading加载/动态环图/胶囊柱图/水位图/进度池/飞线图/飞线图增强版/锥形柱图/数字翻牌器/轮播表/排名轮播表

#安装

cd datav-project

在Vue项目下进行组件库安装。

• npm安装

npm install @jiaminghi/data-view

• yarn安装

yarn add @jiaminghi/data-view

#使用

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
​
Vue.use(dataV)

#按需引入

按需引入仅支持基于ES module的tree shaking，按需引入示例如下：

import { borderBox1 } from '@jiaminghi/data-view'
​
Vue.use(borderBox1)

---

DataV+ Vue3+TS+Vite版

由于之前大佬写的 DataV 不支持Vue3 Vite2.x，现部分代码用Vue3+TS重构。

文档地址：datav-vue3.netlify.app

Gitee地址：gitee.com/kjgl77/data…

Github地址：github.com/vaemusic/da…

Demo预览地址：datav-vue3-demo.netlify.app/

Demo Gitee地址：gitee.com/kjgl77/elec…

Demo Github地址：github.com/vaemusic/el…

使用方法

• 安装，此处使用npm工具，也可以yarn，pnpm等

npm install @kjgl77/datav-vue3

全局引入

// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'
​
const app = createApp(App)
​
app.use(DataVVue3)
app.mount('#app')

再会！！！