导读

Vue3是一款流行的前端框架，提供了许多实用的功能和工具。在Vue3的生态系统中，有许多组件库可供选择，这些组件库可以帮助我们更快速地开发应用程序，并提供了大量的常用组件。

下面是一些常用的Vue3组件库：

Element Plus Element Plus是一款基于Vue3的UI组件库，是Element UI的升级版。Element Plus提供了许多现代化的组件和工具，包括日期选择器、表格、表单、弹出框、下拉框等等。Element Plus的文档和演示非常详细，易于使用和学习。
Ant Design Vue Ant Design Vue是一款基于Vue3的UI组件库，提供了许多优雅、美观的组件和模板，包括按钮、表单、布局、菜单、模态框等等。Ant Design Vue还提供了许多实用的工具和方法，包括表格分页、国际化等等。
Vant Vant是一款轻量级、可定制的移动端UI组件库，是由有赞团队开发的。Vant提供了许多常用的移动端组件，包括按钮、导航栏、图标、下拉刷新等等。Vant还提供了丰富的API和文档，可以满足不同的开发需求。
PrimeVue PrimeVue是一款基于Vue3的UI组件库，提供了许多现代化的组件和工具，包括数据表格、表单、弹出框、菜单、图表等等。PrimeVue还提供了许多主题和可定制选项，可以轻松地适应不同的项目需求。
Tailwind UI Tailwind UI是一款基于Vue3的UI组件库，提供了许多现代化的组件和模板，包括按钮、卡片、表格、表单等等。Tailwind UI的设计风格简洁、美观，非常适合现代化的应用程序开发。Tailwind UI还提供了许多实用的工具和模板，可以帮助我们更快速地构建应用程序。

组件库使用基本思想

其实都差不多的，

首先npm或yam安装它的依赖文件

然后在main.ts中引入（一般通过注册实现全局引入）

然后在组件中使用对应的组件即可

像Ant Design Vue Ant Design Vue的组件一般就类似a-button、a-table这样加上前缀的标签来使用组件库，

然后给组件库标签加上不同的属性和值来控制显示的样式

当然了组件库可能还存在一些特定的函数和环境变量、属性需要事先定义

同样的，组件只是封装了觉得多数的样式和请求等的简化

我们还是需要配合Vue3的各种API去构建具体的页面

以Antdv为例，展示组件开发基本流程

虽然已经学过Vue3项目的构建了但是还是从构建开始来记录Vue3使用Antdv吧，当做巩固下咯~

使用 Vite 构建 Vue3 项目更为方便快捷，而且也可以直接使用 TypeScript。

以下是在 Vue3 中使用 Vite 和 TypeScript 开发 Antdv 的步骤：

1、安装 Vite

你可以使用以下命令在全局范围内安装 Vite。

npm install -g vite

2、使用Vite构建Vue3+Typescript项目

使用以下命令创建一个 Vue3 项目。

npm init vite my-project --template vue-ts

这个命令将创建一个名为 my-project 的 Vue3 项目，其中包括了 TypeScript 配置。

使用以下命令安装 Ant Design Vue。

npm install ant-design-vue@next

3、全局注册Andtv到Vue实例中

在 main.ts 文件中引入 Ant Design Vue 并将其添加到 Vue 实例中。

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App.vue'

createApp(App)
  .use(Antd)
  .mount('#app')

4、使用 Ant Design Vue 组件

在组件中使用 Ant Design Vue 组件非常简单。你只需要在组件中导入所需的组件并使用它们即可。

<template>
  <a-button type="primary" @click="handleClick">Primary Button</a-button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Button } from 'ant-design-vue'

export default defineComponent({
  components: {
    'a-button': Button
  },
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
})
</script>

在上述示例中，我们导入了 Button 组件并在组件中使用了 a-button 标签，将 Button 组件作为子组件。

希望这些步骤可以帮助你在 Vue3 中使用 Ant Design Vue，并且使用 TypeScript 进行开发。