Vue项目中引用‘阿里巴巴字体图标库iconfont’

文章介绍了在UI设计中遇到的图标问题,推荐使用阿里巴巴的Iconfont库获取SVG格式图标,便于项目管理和统一。同时,讲解了如何在Vue项目中应用这些图标,以及Vue框架的相关概念和技术细节。
摘要由CSDN通过智能技术生成

我们看到在上面两个平台设计图中的出现了大量的图标,在某种情况下,这种图标是需要我们自己去找的,不要喷我们的 ui 哈,主要是我喜欢麻烦 哈哈,如果ui提供我也是要求他为我们提供SVG格式的,至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标,像element-ui、iview-ui中都提供了icon图标

在这里插入图片描述

在这里插入图片描述

上面的两个ui框架中都提供了很多图标我们至于要直接运用即可,但是在我们的开发需求中很多图标是不包含在这其中的,很难找到一样甚至相近的都很少,当然不包括那些按照ui库进行设计的ui设计师,下面为大家介绍一款强大的图标库 阿里巴巴字体图标库iconfont

在这里插入图片描述

点击进入官网

2.登录或者注册

点击右上角角的头像

在这里插入图片描述

随意选择一种方式即可

在这里插入图片描述

3.使用步骤
3.1 点击我的项目

在这里插入图片描述

3.2 创建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

上面的三步我们就创建了一个名为测试一的新项目,那下面我们就开始添加图标了

3.3 添加图标

在这里插入图片描述

我们就以扫一扫类的图标为例,回到首页搜索扫一扫,然后回车

在这里插入图片描述

我们可以看到仅仅扫一扫就为我们提供了255个图标,是不是很全面

3.4 将图标添加到项目中

在这里插入图片描述

我们将自己想要的图标添加到购物车,然后擦从购物车中将图标添加到项目中

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

添加后我们的项目中就拥有了我们需要的图标,前面我说到如果我们找不到ui设计的图标需要他提供的话 我希望他为我提供svg格式的 下面告诉大家原因

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我们可以将ui提供给我们的svg格式的图标上传到我们的项目中,这样的话方便我们统一进行管理,我们就可以将所有需要到的图标都添加到我们的项目中后我们就需要将这些图标添加到我们的项目中

3.5 将我们图标项目运用到Vue项目

Vue

  • 什么是MVVM?

  • mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

  • 组件之间的传值?

  • Vue 双向绑定原理

  • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

  • 虚拟 DOM 实现原理

  • Vue 中 key 值的作用?

  • Vue 的生命周期

  • Vue 组件间通信有哪些方式?

  • vue 中怎么重置 data?

  • 组件中写 name 选项有什么作用?

  • Vue 的 nextTick 的原理是什么?

  • Vuex 有哪几种属性?

    开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值