568a63506799286ee641228c8f8cd769a2201e1cbaa4d8f72657c2f9581d29726fbdedea277fcb88b15f4306f81ced96dc55481ff547f0b5fc4ebd127fb73d 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. # DataV Vue3+TS+Vite版
  2. [![Author](https://img.shields.io/badge/Author-kjgl77-red.svg "Author")](https://github.com/vaemusic "Author") [![LICENSE](https://img.shields.io/github/license/vaemusic/datav-vue3 "LICENSE")](https://github.com/vaemusic/datav-vue3/blob/master/LICENSE "LICENSE")
  3. [![NPM](https://nodei.co/npm/@kjgl77/datav-vue3.png?mini=true)](https://www.npmjs.com/package/@kjgl77/datav-vue3)
  4. 由于之前大佬写的 [DataV](http://datav.jiaminghi.com/) 不支持Vue3 Vite2.x,现部分代码用Vue3+TS重构。
  5. [文档地址](https://datav-vue3.netlify.app):https://datav-vue3.netlify.app
  6. [Gitee地址](https://gitee.com/kjgl77/datav-vue3):https://gitee.com/kjgl77/datav-vue3
  7. [Github地址](https://github.com/vaemusic/datav-vue3):https://github.com/vaemusic/datav-vue3
  8. [Demo预览地址](https://datav-vue3-demo.netlify.app/):https://datav-vue3-demo.netlify.app/
  9. [Demo Gitee地址](https://gitee.com/kjgl77/electronic-file):https://gitee.com/kjgl77/electronic-file
  10. [Demo Github地址](https://github.com/vaemusic/electronic-file):https://github.com/vaemusic/electronic-file
  11. ## 使用方法
  12. - 安装,此处使用pnpm工具,也可以yarn,npm等
  13. ```shell
  14. pnpm install @kjgl77/datav-vue3
  15. ```
  16. ### 全局引入
  17. ```ts
  18. // main.ts中全局引入
  19. import { createApp } from 'vue'
  20. import DataVVue3 from '@kjgl77/datav-vue3'
  21. const app = createApp(App)
  22. app.use(DataVVue3)
  23. app.mount('#app')
  24. ```
  25. 引入后在.vue文件中可以直接使用
  26. ```html
  27. <dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  28. ```
  29. ### 局部引入
  30. ```html
  31. <!-- 在.vue文件的script中import部分组件 -->
  32. <script lang="ts" setup>
  33. import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
  34. </script>
  35. <template>
  36. <!-- 引入之后就可以在vue的template中直接使用 -->
  37. <decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />
  38. <decoration-2 :reverse="true" style="width:5px;height:150px;" />
  39. </template>
  40. ```
  41. 新的组件库开发根据大佬的 [MY-Kit](https://github.com/jrainlau/MY-Kit) 开发。支持脚本生成基础文件,文档,可使用Markdown一边开发源码一边写文档。详情可见MY-Kit文档。