开箱即用地支持多种引入方式。

完整引入

完整引入组件库。

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

const app = createApp(App);

app.use(VUI, {
  // ...可选配置参数
});
app.mount('#app');

或者使用create函数

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

const app = createApp(App);

app.use(create({
  components,
  themes,
}), {
  // ...可选配置参数
});
app.mount('#app');

按需加载

默认支持tree shaking，无需任何插件。

<script setup>
  import { VButton } from '@ckpack/v-ui';
</script>

<template>
  <v-button>Test</v-button>
</template>

TIP

出于大小以及性能的考虑，按需加载时没有注入所需组件的CSS, 你需要通过 create 函数(全局)或 config-provider 组件(局部)按需注入组件所需的 CSS。 详情参考

浏览器直接引入

你也可以直接通过浏览器的script标签导入。