Модульная библиотека импорта пользовательского интерфейса в nuxtjs

Я изучаю nuxtjs, и я использую ant-design-vue в качестве своей библиотеки пользовательского интерфейса, я могу импортировать библиотеку как плагин, и она отлично работает

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>

оператор импорта работает нормально, когда он находится в плагине, но не на странице по отдельности, я получаю сообщение об ошибке Unknown custom element: <a-button> - did you register the component correctly?


vue.js nuxt.js antd
person Ibrahim Mohammed    schedule 04.11.2018    source источник

Ответы (2)


arrow_upward
4
arrow_downward

это сработало, когда я сделал это

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

export default {
  components: {
    'a-button':Button
  }
}
</script>
person Ibrahim Mohammed    schedule 04.11.2018

arrow_upward
0
arrow_downward

Из объявления нескольких компонентов это сработало для меня (Nuxt 2.1.3 в layout / default.vue)

<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>
person silvan    schedule 02.07.2020