Overture UI

介绍

Overture UI 是一个基于 Vue 3 和 Element Plus 二次封装的组件库，旨在通过统一的设计规范和便捷的组件接口，提升前端开发效率。目前暂不支持 TypeScript，后续将逐步完善。

设计目标

• 保持与 Element Plus 的兼容性，降低学习成本
• 提供更符合业务场景的封装组件
• 统一项目内的组件使用规范
• 简化常用功能的实现流程

安装教程

环境要求

• Vue 3.2+
• Element Plus 2.10+

安装命令

# 使用 npm 安装
npm install element-plus overture-ui

# 或使用 yarn 安装
yarn add element-plus overture-ui

快速开始

1. 引入组件库

在项目的入口文件（如 main.js）中引入并注册 Overture UI：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'; // 必须先引入 Element Plus
import 'element-plus/dist/index.css'; // 引入 Element Plus 样式
import OvertureUI from 'overture-ui'; // 引入 Overture UI

const app = createApp(App);
app.use(ElementPlus); // 先注册 Element Plus
app.use(OvertureUI); // 再注册 Overture UI
app.mount('#app');

2. 使用组件

在 Vue 组件中直接使用封装的组件，以下是典型场景示例：

基础按钮组件示例

<template>
  <div class="button-demo">
    <!-- 基础按钮 -->
    <ov-button>默认按钮</ov-button>
    <ov-button type="primary">主按钮</ov-button>
    <ov-button type="success">成功按钮</ov-button>
    <ov-button type="warning">警告按钮</ov-button>
    <ov-button type="danger">危险按钮</ov-button>
    <ov-button type="info">信息按钮</ov-button>
    
    <!-- 按钮状态 -->
    <ov-button disabled>禁用按钮</ov-button>
    <ov-button round>圆角按钮</ov-button>
    <ov-button circle>圆形按钮</ov-button>
    <ov-button link href="#">链接按钮</ov-button>
  </div>
</template>

使用贴士

1. 与 Element Plus 的兼容性

Overture UI 会自动注册所有 Element Plus 组件，因此可以直接使用 , 等原生组件 封装组件（ov- 前缀）在原生组件基础上添加了业务常用功能，具体文档待完善

2. 依赖注意事项

必须显式安装 element-plus，Overture UI 仅作为其扩展 确保 element-plus 版本与 Overture UI 兼容（推荐使用 ^2.10.0）

常见问题

Q：为什么需要先安装 Element Plus？

A：Overture UI 基于 Element Plus 开发，必须依赖其核心功能。安装后 Overture UI 会自动注册 Element Plus 组件，无需额外操作。

Q：能否同时使用 ov-button 和 el-button？

A：可以。Overture UI 保留了 Element Plus 原生组件的使用方式，两者可混合使用。