# Dh-element-plus

**Repository Path**: huang646373491/dh-element-plus

## Basic Information

- **Project Name**: Dh-element-plus
- **Description**: 从零到一创建高仿element-plus组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-04-07
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dh-element-plus 项目介绍

## 一、项目概述

`dh-element-plus` 是一个基于最新版的 Vue 3、TypeScript、Vite 以及其他相关工具封装的 UI 组件库。项目从零开始，封装了多个常用的组件，如 Button、Alert、Dropdown、Form、Icon、Input、Message、Select、Switch、Tooltip 和 Collapse 等。此外，项目还集成了 VitePress 用于文档构建，以及 ESLint 用于代码规范和格式检查。

### 在线网址: http://121.40.96.76:5174
## 二、技术栈

- **Vue 3**：使用 Vue 3 的 Composition API，提供更强大、更灵活的状态管理和逻辑复用能力。
- **TypeScript**：通过 TypeScript 的强类型系统和静态分析特性，提升代码质量和可维护性。
- **Vite**：一个轻量级的现代前端构建工具，通过原生 ESM 提供快速的冷启动和热模块替换（HMR）。
- **VitePress**：基于 Vite 的静态站点生成器，用于构建项目的文档网站。
- **ESLint**：用于代码规范和格式检查，帮助开发者编写更加规范、可维护的代码。
- **其他依赖**：项目可能还使用了其他 Vue 3 生态系统中的库和工具，如 Vue Router、Pinia（或 Vuex）等，用于构建完整的单页面应用程序。

## 三 使用说明

### 1. 安装

```bash
npm install @denghongjun/dh-element-plus  
## 或者
pnpm install @denghongjun/dh-element-plus
```

### 2. 引入

在 Vue 项目中，你可以通过以下方式引入并使用 `dh-element-plus` 组件：

```javascript
  import { createApp } from 'vue';  

  import ElementPlus from '@denghongjun/dh-element-plus';  

  import '@denghongjun/dh-element-plus/dist/style.css'; // 引入样式文件  

  import App from './App.vue';  

    

  const app = createApp(App);  

  app.use(ElementPlus);  

  app.mount('#app');

```

  ### 3. 配置 ESLint

  在项目根目录下创建一个 `.eslintrc.js` 或 `.eslintrc.json` 文件，用于配置 ESLint 的规则和插件。(可不管) 例如：

```json
  {  
    "root": true,  
    "env": {  
      "node": true  
    },  
    "extends": [  
      "plugin:vue/vue3-essential",  
      "eslint:recommended",  
      "@vue/typescript/recommended",  
      "@vue/prettier",  
      "@vue/prettier/@typescript-eslint"  
    ],  
    "parserOptions": {  
      "ecmaVersion": 2020  
    },  
    "rules": {  
      // 在这里添加或覆盖 ESLint 的默认规则  
    },  
    "overrides": [  
      {  
        "files": ["**/*.vue"],  
        "rules": {  
          // 针对 .vue 文件的特殊规则  
        }  
      }  
    ]  
  }
```

### 4. 使用 VitePress 构建文档

  你可以在项目的 `docs` 目录下使用 VitePress 构建文档网站。首先，确保你已经安装了 VitePress：

```bash
  npm install vitepress --save-dev
```

  然后，在 `docs` 目录下创建一个 `index.md` 文件作为文档的首页，并根据需要添加其他 Markdown 文件。最后，通过运行以下命令来启动开发服务器或构建生产版本：

```bash

  # 启动开发服务器  
  npm run docs:dev  
    
  # 构建生产版本  
  npm run docs:build
```

## 

## 四、组件列表及功能介绍

### 1. Button（按钮）

- 提供多种类型、尺寸和状态的按钮，支持点击事件和自定义样式。

### 2. Alert（警告框）

- 展示重要的提示或警告信息，支持多种类型和持续时间设置。

### 3. Dropdown（下拉菜单）

- 提供下拉菜单功能，支持触发方式、菜单项和自定义内容等。

### 4. Form（表单）

- 提供表单容器和表单项组件，支持表单验证、提交和重置等功能。

### 5. Icon（图标）

- 提供丰富的图标资源，支持自定义图标和图标样式。

### 6. Input（输入框）

- 提供文本输入框组件，支持类型、验证、清除按钮和自定义样式等功能。

### 7. Message（消息提示）

- 提供全局的消息提示功能，支持自定义内容和显示位置等。

### 8. Select（选择器）

- 提供下拉选择器组件，支持单选、多选、搜索和自定义选项等功能。

### 9. Switch（开关）

- 提供开关切换组件，支持开启、关闭状态切换和自定义样式等。

### 10. Tooltip（文字提示）

- 为元素提供文字提示功能，支持自定义内容和触发方式等。

### 11. Collapse（折叠面板）

- 提供可折叠和展开的面板组件，支持多个面板和自定义内容等。




## 五、贡献与反馈

如果你在使用 `dh-element-plus` 的过程中遇到了问题，或者有任何建议或反馈，欢迎在项目的 [Gitee 仓库](https://gitee.com/DhjOring/dh-element-plus/issues) 中提交 issue。同时，我们也欢迎你的贡献，你可以通过提交 pull request 来帮助我们完善和优化组件库。

  ## 六、许可证

  `dh-element-plus` 的许可证信息请参见项目的 [LICENSE](https://gitee.com/DhjOring/dh-element-plus/blob/master/LICENSE) 文件。

  ## 七、未来展望

  我们计划在未来继续扩展和完善 `dh-element-plus` 组件库，添加更多实用的组件和功能，同时优化现有组件的性能和稳定性。此外，我们还将继续探索并集成更多前端工具和技术，以提升项目的开发效率和代码质量。我们期待与广大开发者一起，共同打造一个功能强大、易于使用的 Vue 3 UI 组件库。