组件导入

项目默认配置

默认使用手动导入的方法

<template>
  <div>
    <Input />
    <Space></Space>
  </div>
</template>

<script>
import { Input, Space } from "ant-design-vue";
</script>

按需导入

按需导入已经引入 但是默认未开启 需要在vite.config.mts解除注释即可使用

import { defineConfig } from "@vben/vite-config";

// 自行取消注释来启用按需导入功能
// import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
// import Components from 'unplugin-vue-components/vite';

export default defineConfig(async () => {
  return {
    application: {},
    vite: {
      ...
      plugins: [
        // Components({
        //   dirs: [], // 默认会导入src/components目录下所有组件 不需要
        //   dts: './types/components.d.ts', // 输出类型文件
        //   resolvers: [
        //     AntDesignVueResolver({
        //       importStyle: false, // css in js
        //     }),
        //   ],
        // }),
      ],
      ...
    },
  };
});

然后即可直接在模板使用组件

如上代码

<template>
  <div>
    <a-input />
    <a-space></a-space>
  </div>
</template>

全局默认导入的组件

apps/web-antd/src/components/global/index.ts

import type { App } from "vue";

import { Button as AButton } from "ant-design-vue";

import { GhostButton } from "./button";

/**
 * 全局组件注册
 */
export function setupGlobalComponent(app: App) {
  app.use(AButton);
  // 表格操作列专用按钮
  app.component("GhostButton", GhostButton);
}

默认已经导入a-button和ghost-button组件 即使不使用按需加载, 也可以直接在模板使用