本文主要介绍了在vue3.0中如何使用antdv的相关信息，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
前言
随着我们vue3.0的出现，我们的ui组件库有了一些变化。比如我们老版本的element-ui在vue3.0已经不能用了，如果要用element，需要用最新版本的element-plus。由于不是很好用，我选择了蚂蚁设计Vue。
如果我们以前经常使用antd，我们使用起来会非常方便。
在vue3.0中介绍我们的antdv
1.首先，使用我们的vue/cli创建一个vue3.0项目，使用较少。
2.我们在vue3.0中使用的话需要安装ant-design-vue@next版本，安装后只需要在main.js文件中把antdv引入整个世界(因为博主比较懒，为了省事没有按需加载)，就可以使用所有组件(除了icon)。如果要按需加载，请参考官方文档。
从“vue”导入{ create app }；
从“ant-design-vue”导入Antd
从'导入应用程序。/App '；
导入“ant-design-vue/dist/antd . CSS”；
const app=create app()；
app . config . production tip=false；
app . use(Antd)；
在项目中使用图标。
在vue3.0中，当我们使用图标时，我们需要在使用它的地方介绍我们的图标库，如下所示
从“@ant-design/icons-vue”导入{ user outlined }；
由于我们vue的标签不支持驼峰命名方式，需要在我们的模板中使用，短横线的连接方式如下：
用户概述/
自定项目中的主题(遇见坑)
antd的风格使用Less作为开发语言，定义了一系列全局/组件风格变量，你可以根据自己的需求进行调整。
我们可以通过两种方式定制主题：一种是创建我们的vue.config.js文件进行配置，另一种是创建一个less文件进行变量覆盖。
创建vue.config.js文件
模块.导出={
css: {
loaderOptions: {
减：{
lessOptions: {
修改版本：{
原色':' #1DA57A '，
link-color': '#1DA57A '，
'边框-半径-基线':' 2px '，
},
javascriptEnabled: true，
},
},
},
},
};
我们将主要更改为以下内容
从“vue”导入{ create app }；
从“ant-design-vue”导入Antd
从'导入应用程序。/App '；
-导入“ant-design-vue/dist/antd . CSS”；
导入' ant-design-vue/dist/antd . less '；
const app=create app()；
app . config . production tip=false；
app . use(Antd)；
这样配置之后，我们可能会发现我们的主题并没有生效。他没有报告错误，也没有给出任何提示。这时候我再去看文档，发现漏掉了一条重要的信息，如下图：
我们的少加载程序必须是6.0.0。
但是我什么时候看这个，vue/cli里默认下载的是5.0.0包。所以将less-loader升级到6.0.0后，问题就解决了。
2.建立一个单独的less变量文件，引入这个文件来覆盖antd.less中的变量
@ import ' ~ ant-design-vue/dist/antd . less '；//介绍一下官方的less风格入口文件。
@ import ' your-theme-file . less '；//用于覆盖上面定义的变量
或者具体参考我们的官方文件。
按需加载很重要！而是因为博主懒。我还没在vue3.0里试过。
关于在vue3.0中友好使用antdv的这篇文章到此为止，关于在vue3.0中使用antdv的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。