vue3.0 antd,vue3 antd

　　本文主要介绍了在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)；

在项目中使用图标（icon）

　　在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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。