@wfrog/vc-ui

VC-UI 组件库

自用 的基于 element-plus 二次封装的 vue3 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 方便 为主，打包仅 esm 模式。

组件开发时，依赖的 vue 版本是 ^3.5.22

组件库所使用 CDN 默认源为 jsdelivr，并使用了一个自用的函数库 @wfrog/vc-utils

！！！如果 jsdelivr 无法访问，会导致部分组件失效。解决办法：将 cdn 文件放到自己的服务器上，通过 config-provider 指定地址

组件库依赖

本组件库依赖 element-plus，需要事先安装组件中使用的库，以及组件的依赖

pnpm i element-plus@~2.13.1 @element-plus/icons-vue@^2.3.2 @vueuse/core@^14.0.0
pnpm i @wfrog/vc-utils@^1.0.0 lodash-es@^4.17.21

全量引入

pnpm i @wfrog/vc-ui

在 app.ts 里，全量引入组件和css

import Vc from '@wfrog/vc-ui'
import '@wfrog/vc-ui/index.css'

const app = createApp(App)
app.use(Vc)

在 vue 文件中使用

<template>
    <vc-button :icon="{ type: 'svg', name: 'test' }" type="primary">SVG 图标</vc-button>
</template>

按需导入

pnpm install -D unplugin-vue-components unplugin-auto-import

在 vite.config.ts 里，配置自动导入和组件库

import VcResolver from '@wfrog/vc-ui/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
    // ...
    plugins: [
    // ...
        AutoImport({
            imports: ['vue', '@vueuse/core'],
        }),
        Components({
            resolvers: [VcResolver()],
        }),
    ],
})

单组件加载

pnpm i @wfrog/vc-ui

在 app.ts 里，全量引入 css

import '@wfrog/vc-ui/es/style.css'

在 vue 文件中

<template>
    <VcButton :icon="{ type: 'svg', name: 'test' }" type="primary">SVG 图标</VcButton>
</template>

<script lang="ts" setup>
import VcButton from '@wfrog/vc-ui/es/components/button'
</script>