你可以通过配置参数避免潜在的样式冲突以及组件名冲突。

自定义组件前缀

在全局引入时我们可以通过prefixComponent自定义组件前缀来解决组件名称冲突的问题。

全局引入时自定义组件前缀

import { createApp } from 'vue';
import VUI from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(VUI, {
  prefixComponent: 't',
});
app.mount('#app');

全局按需引入自定义组件前缀

import { createApp } from 'vue';
import { VButton, VSpace, create, themes } from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(create({
  components: [VButton, VSpace],
  themes,
}), {
  prefixComponent: 't',
});
app.mount('#app');

然后我们可以在其他地方就这样使用

<!-- <v-button>Test</v-button> -->
<t-button>Test</t-button>

自定义类名前缀

由于CSS没有作用域的概念的，可能会造成组件样式的冲突，我们可以通过prefixCls自定义生成class以及CSS 变量前缀来解决项目样式冲突的问题。

全局引入时自定义类名前缀

import { createApp } from 'vue';
import VUI from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(VUI, {
  prefixComponent: 't',
  prefixCls: 't',
});
app.mount('#app');

全局按需引入自定义类名前缀

import { createApp } from 'vue';
import { VButton, VSpace, create, themes } from '@ckpack/v-ui';
import App from '@/App.vue';

const app = createApp(App);

app.use(create({
  components: [VButton, VSpace],
  themes,
}), {
  prefixComponent: 't',
  prefixCls: 't',
});
app.mount('#app');

使用config-provider自定义类名前缀

<template>
  <v-config-provider
    prefix-cls="t"
  >
    <v-button theme="primary">
      Button
    </v-button>
  </v-config-provider>
</template>