vue中使用antd

Vue 中使用 Ant Design（简称 AntD）是一种常见的做法，它能让 Vue 应用程序拥有优雅、易用的界面组件。AntD 提供了一系列基于 React 的设计样式，非常适合企业级应用。以下是集成 AntD 到 Vue 项目的基本步骤：

1. 安装依赖：
使用 npm 或 yarn 进行安装：

   npm install antd @vue/cli-plugin-ant
   # 或者
   yarn add antd vue-cli-plugin-ant

2. 配置 Vue CLI：
打开 `vue.config.js` 文件并添加 AntD 插件支持：

   module.exports = {
     pluginOptions: {
       'ant-design-vue': {
         libraryDirectory: 'lib', // 指定 AntD 组件库的路径，默认为 'packages'
       },
     },
   };

3. 引入组件：
在需要使用 AntD 组件的地方引入它们，例如在模板文件 `<template>` 中或组件内部的 `import` 语句中：

   <script setup>
   import { Button } from 'ant-design-vue';
   </script>

   <template>
     <Button type="primary">点击我</Button>
   </template>

4. 全局样式导入：
如果你想全局使用 AntD 的主题样式，可以在项目的根目录下创建一个 `global.css` 文件，并导入 AntD 的全局 CSS：

   /* global.css */
   @import '~ant-design-vue/dist/antd.css';

5. 配合 TypeScript 使用：
如果你的项目使用 TypeScript，记得安装类型定义文件：

   npm install @types/ant-design-vue --save-dev