快速上手

安装

Element Hooks 基于 Element Plus 构建。开始使用前，请确认项目已满足以下依赖条件：

• Vue >= 3.0
• Element Plus >= 2.11
• TypeScript >= 5.0（推荐，非必需）

npm

npm install element-hooks

yarn

yarn add element-hooks

pnpm

pnpm add element-hooks

bun

bun add element-hooks

引入插件

在绝大多数场景下，强烈建议将 Element Hooks 作为 Vue 插件进行注册。这不仅允许你进行全局配置，还能自动开启针对 Vue DevTools 的扩展支持，以便在开发时直观地审查和追踪各个 Hook 的内部状态树。

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import ElementHooks from 'element-hooks';
import App from './App.vue';

const app = createApp(App);

app.use(ElementPlus);
app.use(ElementHooks);

app.mount('#app');

基本用法

在页面中，你只需要引入所需的 Hook 并执行它，通常会返回一个由组件（Component）与控制器（Controller）组成的元组。你可以在 setup 中调用控制逻辑，并在 <template> 视图声明挂载的组件标签：

<script setup lang="ts">
  import { useDialog } from 'element-hooks';

  const [Dialog, { open, close }] = useDialog({
    title: '提示',
    width: 500,
  });
</script>

<template>
  <el-button @click="open">打开对话框</el-button>
  <Dialog>
    <p>这是一段内容。</p>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </Dialog>
</template>

完整的可用特性与介绍，请参阅后续的 Hooks 介绍。

自动导入

如果你在项目中使用了 unplugin-auto-import，可以通过引入 element-hooks/composables 默认对象的所有键名，将其添加至 imports 配置中实现 Hooks 的自动导入。

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import ElementHooksComposables from 'element-hooks/composables';

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        {
          'element-hooks': Object.keys(ElementHooksComposables),
        },
      ],
    }),
  ],
});

下一步

了解了基本的应用方式，你可以进一步研究：

• Hooks 介绍 — 了解 Element Hooks 的 API 边界与分类。
• 全局配置 — 设置应用级的统一风格。