Crayon UI

基于 Vue3+Antd 公共组件库

查阅文档：待补充

特性

• 功能丰富：组件库除了组件，还提供常用的指令、方法、或样式。
• 自动按需加载：模块化组件提供按需加载功能，配合 vite 插件实现自动化。
• 全局化配置：通过 provide/inject 提供全局化配置以适配不同项目开发场景。

快速上手

安装

1. 通过 npm 安装

npm install crayon-ui

yarn add crayon-ui

pnpm install crayon-ui

使用

全局完整注册

import { createApp } from 'vue'
import CrayonUI from 'crayon-ui'
import App from './App'
import 'crayon-ui/style/scss/index.scss' // 或 'crayon-ui/style/css/index.css'

const app = createApp(App)

app.use(CrayonUI).mount('#app')

按需加载

如果你仅需要加载使用的组件，可以通过以下的写法来按需加载组件。

import { CraAutoScroller } from 'crayon-ui'
import 'crayon-ui/style/scss/components/auto-scroller.scss' // 或 'crayon-ui/style/css/components/auto-scroller.css'

如果使用 vite，可通过unplugin-vue-components插件实现组件按需加载：

import Components from 'unplugin-vue-components/vite'
import { CrayonUIResolver } from 'crayon-ui/resolver'
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // 自动识别、按需加载CrayonUI
        CrayonUIResolver({
          importStyle: 'scss',
        }),
      ],
    }),
  ],
})

按需加载情况下，只会再加对应的组件的样式，公共样式需要单独引入：

import 'crayon-ui/style/scss/common.scss' // 或 'crayon-ui/style/css/common.css'

注意事项

因为 crayon-ui 有多个组件依赖其他第三方组件库（如 antd-design-vue），如果项目中有使用unplugin-vue-components来按需加载这些第三方组件库，那么在 crayon-ui 中的依赖组件将无法被识别并正确加载该组件样式。 所以引入 crayon-ui 后，应该手动引入对应依赖组件的样式，确保依赖组件样式正常加载。

推荐方式

通过unplugin-vue-components插件实现组件按需加载，全量引入第三方依赖组件全量样式（如 antd-design-vue）。

在 vue 应用中全量引入 antd-design-vue 样式：

import 'ant-design-vue/dist/antd.less' // 或 'ant-design-vue/dist/antd.css'
import 'crayon-ui/style/scss/common.scss' // 或 'crayon-ui/style/css/common.css'

在 vite 插件配置中：

...
Components({
  resolvers: [
    AntDesignVueResolver({
      // 按需加载时不再加载组件的样式
      importStyle: false,
    }),
    CrayonUIResolver({
      importStyle: 'scss',
    }),
  ],
}),
...

相关链接