按需引入

需要通过vite-plugin-style-import加载样式
vite.config.ts 增加以下配置

javascript

import { createStyleImportPlugin } from 'vite-plugin-style-import'
//...
export default defineConfig({
  //...
  plugins: [
    //...
    createStyleImportPlugin({
        libs: [
          {
            libraryName: 'seldom-ui',
            esModule: true,
            resolveStyle: (name) => {
              if (name !== 'init') {
                return `seldom-ui/lib/theme/${ name }.css`
              } else {
                return ''
              }
            },
          },
        ],
      })
  ]
  //...
})

main.ts 中需要修改的部分

javascript

// 按需引入需要每个组件各自引入注册
import { AnySelect, GroupForm, Color, ColorGroup, RichText, init } from 'seldom-ui'
//...
app.component(AnySelect.name, AnySelect)
app.component(GroupForm.name, GroupForm)
app.component(RichText.name, RichText)
app.component(Color.name, Color)
app.component(ColorGroup.name, ColorGroup)
// 需要init方法全局初始化，同样可以传入参数
init(app, {})
//...

组件清单

javascript

const components = [
  CodeEditor,
  Color,
  ColorGroup,
  AnySelect,
  Grid,
  GridItem,
  GroupForm,
  Popper,
  Upload,
  Table,
  Dom,
  RichText,
  CheckGroup
]

按需引入 #

按需引入