vue3 引入dataV 报错,使用patch-package记录插件包 node_modeule 修改记录。 vite 版DataV

开发数字大屏功能,引用dataV UI组件库比较好用,目前分为Vue2Vue3 两个版本。

Vue2 --DataV版本

yarn add @jiaminghi/data-view

Vue3 --DataV版本

yarn add @dataview/datav-vue3

vite – --DataV版本

//不想动手改的,也可以使用此版本(在大佬DataV版本基础上重构的)
yarn add @kjgl77/datav-vue3 --save

由于之前大佬写的 DataV 不支持Vue3 Vite2.x,因此需要做一下兼容。

vue3引用 @jiaminghi/data-view

需要对 for 循环,增加 key 索引
vue3 引入dataV 报错,使用patch-package记录插件包 node_modeule 修改记录。 vite 版DataV_第1张图片

vue3 引用@dataview/datav-vue3

插件包中,package.json — main.js 入口地址不对

vue3 引入dataV 报错,使用patch-package记录插件包 node_modeule 修改记录。 vite 版DataV_第2张图片

修改node_modules,使用patch-package记录

上面两种报错,都需要涉及到修改3方插件内容,但是每次重新执行yarn install,修改的内容又会覆盖,因此需要patch-package记录一下。

下载

yarn add patch-package --save

执行

// 以 @jiaminghi/data-view 为例,修改内容后执行一下操作
npx patch-package @jiaminghi/data-view

效果

这是项目的根目录下,会创建一个patches文件夹,里面记录了修改内容记录

修改package.json

package.json中script添加"postinstall":“patch-package”

"scripts": {
   	...
    "postinstall": "patch-package"
....
  }

你可能感兴趣的:(vue,dataV,patch-package)