前言:仅供参考,目前本人在项目使用是没问题的

 1、安装data-vue3

npm install @dataview/datav-vue3

2、按需导入


<template>
  <BorderBox1 class="container"> Content </BorderBox1>
</template>

<script>
import { BorderBox1 } from '@dataview/datav-vue3';
</script>

结果报错如下:

 通过这个博主文章中的解决方法二(Vue3安装dataV报错以及解决方案_vue3引入datav报错_呆呆的机器人儿~的博客-CSDN博客)---- 找到node_modules/@dataview/datav-vue3/package.json 文件进行修改 把./es/index.js 修改成./es/index.mjs

 在项目中可以通过混合来避免代码的重复书写

在项目的src目录下创建minixs文件,在该目录下创建dataVMinixs.js文件,把用到的边框和装饰引入,注册。

import {
  BorderBox1,
  BorderBox4,
  BorderBox8,
  Decoration1,
  Decoration8,
  Loading,
} from "@dataview/datav-vue3";
const dataVMinixs = {
  components: {
    BorderBox1,
    BorderBox4,
    BorderBox8,
    Decoration1,
    Decoration8,
    Loading,
  },
};
export { dataVMinixs };

然后,在用到dataV的组件中引入dataVMinixs

 存在问题:

问题一:装饰的样式好像是只能用到8,当引入9的时候会报如下警告:

 去node_modules下找了dataV文件,组件好像就包含到了8

问题二:如果组件中使用了dataV的组件,进行路由跳转的时候会报以下错误

 解决方式:路由跳转的时候,不销毁组件(也就是说对组件进行缓存

 

 把图一的代码修改成图二的,再进行路由跳转的时候可以正常跳转且不报错。

Logo

前往低代码交流专区

更多推荐