导入在nuxtjs中模块化的UI库 [英] Import UI library modularized in nuxtjs

问题描述

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

I'm learning nuxtjs and i use ant-design-vue as my ui library, i'm able to import the library as a plugin and it works fine

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

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

但是这会全局导入组件，但是我想做的是将单个组件导入到特定页面而不是全局，因为nuxt会自动延迟加载此内容，ps:我可以使用插件导入单个组件，并且它仍然可以工作全球进口. 例如，如果我有一个使用日期选择器的管理仪表板，而我在应用程序的其他任何地方都没有使用它，则我尝试在pages/dashboard/index.vue

but this import the components globally, but what i wanted to do is to import individual components into specific pages not globally since nuxt will auto lazy load this, ps: i can import individual components using the plugin and it works but it's still global import. for example if i have an admin dashboard that uses a datepicker which i don't use it anywhere else on the app, i tried to do in the 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?

the import statement works fine when it's in the plugin but not in the page individually, i get error Unknown custom element: <a-button> - did you register the component correctly?

推荐答案

它在我执行此操作时有效

it worked when i did this

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

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

这篇关于导入在nuxtjs中模块化的UI库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！