Ant design + Vue

一、配置Ant-Design-Vue 4.x

1.安装依赖

// 安装Ant Design Vue 和 配套icons
pnpm add --save ant-design-vue@4.x @ant-design/icons-vue

// 安装组件自动引入插件
pnpm add -D unplugin-vue-components

2. 配置vite.config.ts 

// Ant Design Vue 4.x 自动按需引入组件
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // Ant Design Vue 4.x 自动按需引入组件
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
})

3. 在main.ts引入

// import 'ant-design-vue/dist/antd.css'; // 引入antdv组件库的css文件
// 上面的报错就引入下面的
import "ant-design-vue/dist/reset.css";

4.测试 

<template>
<a-table :dataSource="dataSource" :columns="columns" bordered/>
</template>