问题场景
环境:
使用前端框架Ant Design Pro(https://pro.antdv.com/docs/getting-started)
ant-design-vue版本v1.7.8、vue2
基本组件 如a-button正常,但一个需求需要用到树形结构,<a-directory-tree>,页面报错
<a-directory-tree> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
意思是自定义组件没有被注册,但<a-directory-tree>是ant-design-vue自带组件。
解决过程
1、尝试卸载ant-design-vue 重新安装,重启项目,发现无效。
2、直接使用vue2工程并安装ant-design-vue v1.7.8,引入ant-design-vue正常,怀疑是Ant Design Pro引入问题
解决办法
第一步:Ant Design Pro使用了babel,对ant-design-vue设置了懒加载
删除(注释)掉响应内容即可。
// lazy load ant-design-vue
// if your use import on Demand, Use this code
// plugins.push(['import', {
// 'libraryName': 'ant-design-vue',
// 'libraryDirectory': 'es',
// 'style': true // `style: true` 会加载 less 文件
// }])
第二步:在main.js全局引入antd
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
以上内容若有误,请各位指出,避免误导更多人。