vue3安装使用ant-design-vue

Posted 2023-04-22

参考技术A main.ts 中引入

在 template 中可直接使用组件

在 setup 中 this未指向当前的组件实例 ，不能直接用 this.$message.success('提示信息') ，需要先引入 message 组件后再使用

vue按需引入ant-design-vue报错解决方案

参考技术A 通过 vue-cli 创建的应用，安装了 ant-design-vue ,并通过 babel-plugin-import 进行按需引入。

错误如下：

安装完成后在vue页面中应用 Button 组件，启动项目报错如下：

运行 yarn add less less-loader -D 安装依赖后运行 yarn serve 报错如下，是由于 less-loader 版本过高导致的问题。

对 less-loader 进行降级处理：

在 vue.config.js 中进行如下配置：

完美解决：