ant-design-vue grid导入和使用不生效

问题背景

在初次使用ant-design-vue UI框架时，当时有个功能需要用到栅格布局，然后从UI库中全局导入Grid组件，但是当使用a-row和a-col的时候却未生效。

组件引入并全局注册：

// 按需引入组件
import { Grid } from 'ant-design-vue';
import { App, Component, Plugin } from 'vue';
const comOrPlugins: Array<Component | Plugin> = [
    Grid
];
/**
 * @param {App} app Vue实例
 */
export function setupAntDesign(app: App): void {
    comOrPlugins.forEach(component => {
        app.use(component as Plugin);
    });
}

html使用：

<a-row :gutter="20" class="row-box">
      <a-col :span="6" class="align-center">
      <a-checkable-tag v-for="replyType of replyLogicType"
               :checked="replyType === innerTaskConfig.processConfig.answer.answerType"
               @change="changeReplyType(innerTaskConfig.processConfig.answer, replyType)">
                     {{$t('skill-manager.' + replyType)}}
      </a-checkable-tag>
      </a-col>
</a-row>

html渲染结果为普通的a-row和a-col标签，如果是UI库的组件则会有ant-row样式类

问题原因

UI组件引入的方式不对，只引入了Grid组件，还需要引入Row和Col组件

// 按需引入组件
import {
    Col,
    Row,
    Grid
} from 'ant-design-vue';
import { App, Component, Plugin } from 'vue';
const comOrPlugins: Array<Component | Plugin> = [
    Col,
    Row,
    Grid
];
/**
 * @param {App} app Vue实例
 */
export function setupAntDesign(app: App): void {
    comOrPlugins.forEach(component => {
        app.use(component as Plugin);
    });
}

正确的渲染结果：

解决方法

一共有三种引入和使用方式
1、全局引入Grid、Col、Row， 使用a-row、a-col
2、局部引入Grid、Col、Row，注册（key：value方式）：components: {a-row: Row，a-col: Col}，使用 a-row、a-col

import { Row, Col, Grid } from 'ant-design-vue';
@Options({
    components: {
        Grid,
        'a-row': Row,
        'a-col': Col
    }
})
export default class SkillTaskConfig extends Vue {}

3、局部导入Grid、Col、Row，注册components: {Grid,Row,Col }，使用Row、Col

import { Row, Col, Grid } from 'ant-design-vue';
@Options({
    components: {
        Grid,
        Row,
        Col
    }
})
export default class SkillTaskConfig extends Vue {}