vue3.0中友好使用antdv示例详解


Posted in Vue.js onJanuary 05, 2021

前言

随着我们vue3.0的出现,我们的ui组件库也有了一些变化,像我们的旧版的element-ui已经不能在vue3.0中使用了,如果要使用element的话需要使用最新版的element-plus,由于发现它并不太好用,因此我选择了Ant Design Vue。

如果我们以前经常使用antd的话,我们使用起来这个上手会非常方便。

在vue3.0中引入我们的antdv

1.首先使用我们的vue/cli创建vue3.0项目并使用less

2. 在vue3.0中使用的话我们需要安装 ant-design-vue@next 版本,安装完之后,我们只需要在main.js文件中把antdv引入到全局(由于博主比较懒,为了省事,并没有按需加载),这样我们就可以使用所有的组件了(icon除外)。如果想按需加载请参考 官方文档。

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp();
app.config.productionTip = false;

app.use(Antd);

在项目中使用图标(icon)

在我们vue3.0中我们使用icon需要在我们使用的地方额外的引入我们的icon库,如下写法

import { UserOutlined } from '@ant-design/icons-vue';

由于我们的vue的标签并不支持驼峰命名法,在我们的template中使用的时候需要,换成短横线的连接的方式如下:

<user-outlined />

在项目中定制主题(遇坑)

antd 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,你可以根据需求进行相应调整。
我们有两种方式可以定制主题:一是创建我们的vue.config.js文件进行配置,二是创建一个less文件进行变量覆盖。

创建vue.config.js文件

module.exports = {
 css: {
 loaderOptions: {
  less: {
  lessOptions: {
   modifyVars: {
   'primary-color': '#1DA57A',
   'link-color': '#1DA57A',
   'border-radius-base': '2px',
   },
   javascriptEnabled: true,
  },
  },
 },
 },
};

并且我们要把main中改为如下

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
- import 'ant-design-vue/dist/antd.css';
+ import 'ant-design-vue/dist/antd.less';
const app = createApp();
app.config.productionTip = false;

app.use(Antd);

经过这个配置后我们可能会发现我们的主题并没有生效。他不报错也没有任何提示,这个时候我又去看文档发现自己遗漏了很重要的一条信息,如下图:

vue3.0中友好使用antdv示例详解

我们的这个less-loader必须是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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 #Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 #Vue.js
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python动态性强类型用法实例
2015/05/09 Python
python运行时间的几种方法
2016/06/17 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python的缺点和劣势分析
2019/11/19 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
函授本科自我鉴定
2013/11/03 职场文书
自荐信写法介绍
2014/01/25 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
学校四群教育实施方案
2014/06/12 职场文书
置业顾问岗位职责
2015/02/09 职场文书
认真学习保证书
2015/02/26 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
欢送会主持词
2015/07/01 职场文书
六五普法心得体会2016
2016/01/21 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书