基于Vue3+Vite+TS，二次封装element-plus业务组件

Download: https://xmq1024.com/4135.html

二次封装Element Plus业务组件的步骤如下：

1. 安装Vue3、Vite、TypeScript和Element Plus

在开始之前，需要确保已安装Vue3、Vite、TypeScript和Element Plus。可以使用以下命令安装它们：

```
npm install vue@next vite typescript element-plus
```

2. 创建一个Vue3项目

使用Vite创建一个新的Vue3项目：

```
npm init vite@latest my-project --template vue-ts
cd my-project
npm install
```

3. 配置Element Plus

在`main.ts`中导入Element Plus并注册组件：

```typescript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')
```

4. 创建业务组件

创建一个新文件夹`components`，用于存放业务组件。在其中创建一个新的Vue组件，例如`MyComponent.vue`：

```vue





```

这个组件包含一个Element Plus的按钮，通过`buttonText`属性来设置按钮文本。当按钮被点击时，组件会触发一个`click`事件。

5. 封装业务组件

为了让业务组件更易于使用，可以对其进行二次封装。在`components`文件夹中新建一个`index.ts`文件，用于导出所有业务组件：

```typescript
export { default as MyComponent } from './MyComponent.vue'
```

这里只导出了一个`MyComponent`组件，实际项目中可以根据需要导出多个组件。

6. 使用业务组件

在需要使用业务组件的地方，可以像使用Element Plus组件一样导入和使用业务组件：

```vue





```

这里通过``标签来使用业务组件，并通过`button-text`属性来设置按钮文本。当按钮被点击时，会触发`click`事件，并调用`handleClick`方法。