componentsProvider ( 组件库全局配置 )

注意

该前置需要使用 @smartos-lib/core/componentsProvider 来单独引入

这是 SmartOS 组件库的前置

为什么需要这个前置呢 ?

SmartOS 组件库目前均是使用 Vue3 及 Web Components 封装的组件, 拥有更好的跨项目兼容性, 并使用了 Element Plus 和 Naive UI 作为 UI 库, 就有一些问题:

目前使用该组件库的项目, 有 Vue2 的项目也有 Vue3 的项目, 不排除未来会在 Vanilla JS 的项目中使用该组件库
如果在每个组件内置 Vue3 和 Element Plus、Naive UI, 那么每个组件将会很大
如果不在组件内置 Vue3 和 Element Plus、Naive UI, 而是在项目中引入, 那无法保证依赖的版本一致, 可能会导致一些问题
其他一些重复的依赖或样式

综上所述, 可以发现, 如果真的要实现跨项目运行, 那么, 还是得内置 Vue3、Element Plus、Naive UI 等依赖才能保证体验统一

至此, 就有了这个前置, 解决方案如下:

将 Vue3 和 Element Plus、Naive UI 依赖的代码, 内置在该前置中, 引入前置时, 会将依赖注入到全局上
在其他组件打包时, 将排除相关依赖, 使用全局注入的依赖

目前, 前置并没有实际的功能, 仅仅是将依赖注入到全局, 日后可能会添加一些其他功能

目前, 该前置内置的内容有:

示例

引入前置, 再引入 SmartOS 组件,

vue

<template>
  <smart-docx-editor />
</template>

<script lang="ts" setup>
  import '@smartos-lib/core/componentsProvider';
  import '@smartos-lib/components/smart-docx-editor';
</script>

componentsProvider ( 组件库全局配置 ) ​

示例 ​

componentsProvider ( 组件库全局配置 )

示例