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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue elementUI批量上传文件
Apr 26 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP微信API接口类
2016/08/22 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
家长会欢迎标语
2014/06/24 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2016年会开场白台词
2015/06/01 职场文书
农村老人去世追悼词
2015/06/23 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016十一国庆节感言
2015/12/09 职场文书