🛠️ 安装与使用指南

📦 安装

1. 自动按需引入（推荐方式）

在我们框架 @ey-use/vite-plugin中封装了插件，EyAdminAutoImport和EyAdminResolver。

使用方式与ant-design-vue和element-plus类似，借助 unplugin-vue-components unplugin-auto-import 进行自动按需导入

# 安装核心依赖
pnpm add ey-admin ant-design-vue

# 安装自动按需引入所需插件
pnpm add @ey-use/vite-plugin unplugin-vue-components unplugin-auto-import -D

2. 手动按需引入

# 安装核心依赖
pnpm add ey-admin ant-design-vue

3. 全局引入

# 安装核心依赖
pnpm add ey-admin ant-design-vue

⚙️ 使用方式

🎯 首选方案：自动按需引入（推荐）

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { EyAdminAutoImport, EyAdminResolver } from '@ey-use/vite-plugin'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [EyAdminResolver()]
    }),
    AutoImport({
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
      imports: [EyAdminAutoImport()]
    })
  ]
})

🛠️ 备选方案：手动按需引入

// 组件中使用
import { EySelect, EyTable } from 'ey-admin'

🌟 简易方案：全局引入

// main.ts
import { createApp } from 'vue'
import ant from 'ant-design-vue'
import EyAdmin from 'ey-admin'
import App from './App.vue'

// 必须引入的样式文件
import './assets/main.scss'
import 'ant-design-vue/dist/reset.css'
import 'ey-admin/dist/index.css'

createApp(App)
  .use(router)
  .use(ant)
  .use(EyAdmin)
  .mount('#app')

🧩 组件使用示例

自动按需引入（无需手动导入）

<template>
  <EySelect ...  />
</template>

手动按需引入

<template>
  <EySelect ... />
</template>

<script lang="ts" setup>
import { EySelect } from 'ey-admin'

...
</script>

全局引入

<template>
  <EySelect />
  <EyTable ... />
</template>

💡 方案对比

方案类型	打包体积	使用便利性	推荐场景
自动按需引入	⭐⭐⭐⭐小	⭐⭐⭐⭐高	生产环境
手动按需引入	⭐⭐⭐⭐小	⭐⭐中	简单项目
全局引入	⭐大	⭐⭐⭐⭐⭐极高	原型开发/快速验证

📌 重要提示

1. 所有方式都必须引入样式文件 ey-admin/dist/index.css
2. 自动按需引入需要正确配置 vite.config.ts
3. 生产环境强烈推荐使用自动按需引入方案

---

🎯 根据项目阶段和规模选择最适合的引入方式，享受高效开发体验！