前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)

前言

Vue 是前端开发中非常常见的一种框架，它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中，组件的开发也变得非常简单，但随着 Vue3 版本的发布，组件开发有了更多的特性和优化，为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件，并通过代码实例进行演示。

一、自己封装组件

1、button 代码

在 src 目录下创建 components 文件夹，并在该文件夹下创建 Button 文件。
在Button 文件中创建 index.vue 文件和 index.ts 文件，并编写以下代码
在 index.vue 文件中编写以下代码

在 index.ts 文件中编写以下代码

import ZButton from "./index.vue";

export default ZButton

2、button 使用组件

我们在 home 页面导入组件来进行测试

3、button 效果图

二、基于 Element-Plus 封装组件

1、table 代码

在 components 文件夹下创建 Table 文件。

在Table 文件中创建 index.vue 、 index.ts 和 types.ts 文件，并编写以下代码
在 index.vue 文件中编写以下代码

在 index.ts 文件中编写以下代码

import ZTable from './index.vue'

export default ZTable

在 types.ts 文件中编写以下代码

export interface ZTableOptions {
  // 是否可见
  visible?: boolean
  // 自定义列模板的插槽名
  slotName?: string
  // 日期格式化
  dateFormat?: string
  // 表头
  label: string
  // 字段名称
  prop?: string
  // 对应列的宽度
  width?: string | number
  minWidth?: string | number
  // 对齐方式
  align?: 'left' | 'center' | 'right'
  fixed?: true | 'left' | 'right'
  showOverflowTooltip?: boolean
  sortable?: boolean | 'custom'
}

2、table 组件使用

在 table 文件中下添加 index.vue 并添加对应路由文件，编写以下代码

3、table 效果图

总结

通过以上的介绍和代码实例，我们可以看到 Vue3 提供了更多的特性和优化，让我们更加方便地开发业务组件。在实际开发中，我们可以根据实际需求选择合适的组件开发方式，并通过 Vue3 的特性来提升开发效率。希望本文能够帮助到你在 Vue3 开发中的业务组件开发。上文中的配置代码可在 github 仓库中直接 copy，仓库路径：https://github.com/SmallTeddy/ProjectConstructionHub。