按需导入

EplusKit 提供了基于 ES modules 的开箱即可的 Tree Shaking 功能。

自动导入（推荐）

安装 unplugin 插件：

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

配置 Vite：

import vue from '@vitejs/plugin-vue'
import { EpluskitResolver } from 'epluskit'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [EpluskitResolver()],
    }),
    Components({
      resolvers: [EpluskitResolver()],
    }),
  ],
})

配置 Webpack（可选）：

const { EpluskitResolver } = require('epluskit')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')

module.exports = {
  plugins: [
    AutoImport({
      resolvers: [EpluskitResolver()],
    }),
    Components({
      resolvers: [EpluskitResolver()],
    }),
  ],
}

手动导入

也可以手动导入需要的组件：

import { EkDateRange, EkTable, useDialog, useRequest } from 'epluskit'

// 或者从具体路径导入
import { useRequest } from 'epluskit/es/components/request'
import EkTable from 'epluskit/es/components/table'

样式导入

使用自动导入时，样式会自动引入。手动导入时需要单独导入样式：

// 导入所有样式（完整引入时）
import 'epluskit/dist/index.css'

// 或者导入特定组件样式（按需引入时）
import 'epluskit/es/components/table/src/index.css'
import 'epluskit/es/components/date-range/src/index.css'