快速开始

完整导入

如果项目中已经完整引入 Element Plus，可以直接完整注册 elplus-enhance。

// main.ts / main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import ElplusEnhance from 'elplus-enhance'

import 'element-plus/dist/index.css'
import 'elplus-enhance/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(ElplusEnhance)

app.mount('#app')

自动按需导入

推荐配合 unplugin-vue-components 和 unplugin-auto-import 使用。

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

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ElplusEnhanceResolver } from 'elplus-enhance'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver(), ElplusEnhanceResolver()]
    })
  ]
})

默认情况下，ElplusEnhanceResolver() 会按需导入组件样式，并为增强组件补充其内部依赖的 Element Plus 组件样式。

使用 Sass 变量覆盖

如果项目通过 Element Plus 的 Sass 变量覆盖主题，请让 Element Plus 和 elplus-enhance 都使用 Sass 样式入口。

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { ElplusEnhanceResolver } from 'elplus-enhance'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [
        ElplusEnhanceResolver({ importStyle: 'sass' }),
        ElementPlusResolver({ importStyle: 'sass' })
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/css/element/variables.scss" as *;`
      }
    }
  }
})

ElplusEnhanceResolver({ importStyle: 'sass' }) 会把增强组件自身样式和它依赖的 Element Plus Sass 样式拆开注入，避免在 elplus-enhance 的样式入口中重复转发 Element Plus scss。

关闭样式导入

如果你希望完全自行维护样式，可以关闭 resolver 的样式副作用。

Components({
  resolvers: [
    ElplusEnhanceResolver({ importStyle: false }),
    ElementPlusResolver({ importStyle: 'sass' })
  ]
})

关闭后，elplus-enhance 自身样式和内部依赖的 Element Plus 样式都不会自动导入，需要在项目中手动引入。