导入在 nuxtjs 中模块化的 UI 库 [英] Import UI library modularized in nuxtjs
问题描述
我正在学习 nuxtjs 并且我使用 ant-design-vue 作为我的 ui 库,我可以将该库作为插件导入并且运行良好
从'vue'导入Vue从 'ant-design-vue' 导入 Antd;导出默认值 () =>{Vue.use(Antd)}
但是这会全局导入组件,但我想做的是将单个组件导入到特定页面而不是全局,因为 nuxt 会自动延迟加载它,ps:我可以使用插件导入单个组件,但它仍然有效全球进口.例如,如果我有一个使用日期选择器的管理仪表板,我不会在应用程序的其他任何地方使用它,我尝试在 pages/dashboard/index.vue
<模板><div><a-button type="primary">Primary</a-button><a-button>默认</a-button><a-button type="dashed">Dashed</a-button><a-button type="danger">Danger</a-button>
模板><脚本>从'ant-design-vue/lib/button'导入按钮;导出默认{成分: {按钮}}
import 语句在插件中但不在页面中时工作正常,我收到错误 Unknown custom element: <a-button>- 您是否正确注册了组件?
当我这样做时它起作用了
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)
}
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>
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屋!