Question

我正在学习nuxtjs，并且使用ant-design-vue作为我的ui库，我能够将该库作为插件导入，并且效果很好

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

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

但是这会全局导入组件，但是我想做的是将单个组件导入到特定页面而不是全局，因为nuxt会自动延迟加载此指令，ps：我可以使用插件导入单个组件，并且它仍然可以工作全球进口。例如，如果我有一个使用日期选择器的管理仪表板，而我在应用程序的其他任何地方都没有使用它，则我尝试在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

从多组件声明开始，这对我有用（在layout / 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>

导入在nuxtjs中模块化的UI库

2 个答案: