手写VUE后台管理系统4 - 整合UI框架AntDesignVue

---

AntDesignVue 提供了开箱即用的高质量 Vue 组件

AntDesignVue 官方文档：https://www.antdv.com/components/layout-cn

---

安装

yarn add ant-design-vue

整合

在 main.ts 文件中进行注册（第一次使用，直接使用全局注册，后续需要性能优化再考虑使用按需加载）

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

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

按需加载

使用 vite 的 unplugin-vue-components 插件实现按需加载

yarn add unplugin-vue-components --dev

配置 vite.config.ts 文件，如下所示

// vite.config.js
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
      dts: 'types/components.d.ts',
    }),
  ],
});

其中 dts 配置会自动生成一个导入文件，配合 ide 提供代码提示。因为这里我们单独配置了一个路径，所以需要配置一下 tsconfig.json，将该路径配置到编译范围。

// tsconfig.json
"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts"
],

使用了按需加载，main.ts 文件中就不用引入 ant 组件了，去掉下面的代码，css 文件还是得保留

import Antd from 'ant-design-vue'
app.use(Antd)

此时就可以在代码中直接使用 ant-design-vue 的组件了，插件会自动生成如下代码，加载相应的组件

import { Button } from 'ant-design-vue'