快速开始

本节将介绍如何在项目中使用 EplusKit。

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import ElementPlus from 'element-plus'
import EplusKit from 'epluskit'
import { createApp } from 'vue'
import App from './App.vue'

import 'element-plus/dist/index.css'
import 'epluskit/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(EplusKit)
app.mount('#app')

按需引入

推荐使用按需引入方式，具体配置请参考 按需导入。

配置完成后，你可以直接在组件中使用，无需手动导入：

<script setup>
// 自动导入的工具函数
const { data, loading, send } = useRequest(api.getData, {
  initialData: [],
  immediate: true
})

const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' }
]

const tableData = [
  { id: 1, name: '张三', age: 18 }
]

const dateRange = ref([])
</script>

<template>
  <div>
    <!-- 自动导入的组件 -->
    <EkTable :columns="columns" :data="tableData" />
    <EkDateRange v-model="dateRange" />
  </div>
</template>