Vue3中按需导入使用dataV的vue3版本

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

 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

扫描二维码关注公众号，回复： 15248922 查看本文章

 存在问题：

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

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

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

 解决方式：路由跳转的时候，不销毁组件（也就是说对组件进行缓存）

 

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