导入在nuxtjs中模块化的UI库

Question

我正在学习nuxtjs，我使用ant-design-vue作为我的ui库，我可以将该库作为插件导入，它工作得很好

import Vue from 'vue'
import Antd from 'ant-design-vue';

export default () => {
  Vue.use(Antd)
}

但这是全局导入组件，但我想要做的是将单个组件导入特定页面，而不是全局，因为nuxt会自动延迟加载这个，ps:我可以使用插件导入单个组件，它可以工作，但它仍然是全局导入。例如，如果我有一个使用datepicker的管理仪表板，而我在应用程序的其他任何地方都不使用它，我会尝试在pages/dashboard/index.vue中使用它

  <template>
        <div>
        <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
      </div>
    </template>

<script>
import Button from 'ant-design-vue/lib/button';

export default {
  components: {
    Button
  }
}
</script>

import语句在插件中运行良好，而不是单独出现在页面中，我得到错误Unknown custom element: <a-button> - did you register the component correctly?

Answer 1

当我这样做的时候，它起作用了

<script>
import Button from 'ant-design-vue/lib/button';

export default {
  components: {
    'a-button':Button
  }
}
</script>

Answer 2

在多个组件声明中，这对我很有效(布局/default.vue中的Nuxt 2.1.3 )

<script>
import { Menu, Icon } from 'ant-design-vue'
export default {
  name: 'DefaultLayout',
  components: {
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    'a-menu-item-group': Menu.ItemGroup,
    'a-sub-menu': Menu.SubMenu,
    'a-icon': Icon
  },
  data: () => ({
    activeItem: 0,
    search: '',
    current: ['mail']
  })
}
</script>