场景：

vue-cli搭建的工程化项目，引入element框架后发现图标无效，变为方块

解决方案：

在index.html引入样式文件CDN链接即可

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

引入成功后会发现之前的font-awesome无效，这时去源码查看会看到font-awesome图标前缀是fa fa-xxx形式，但element框架的图标源码格式为el-icon-xxx形式。

.

Vue工程化之引入element-ui框架后图标失效的更多相关文章

  1. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  2. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  3. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  4. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  5. vue项目中使用了vw适配方案，引入第三方ui框架mint-ui时，适配问题解决

    问题分析: 一般第三方ui框架用的都是不同的适配方式,如果我们使用了vw适配,那么在使用mint-ui框架时,就会发现px单位会被转换成vw,从而导致样式变小的问题,如图 解决方案 网上看到了很多种解 ...

  6. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  7. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  8. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  9. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

随机推荐

  1. Python（一）对 meta class 的理解

    1. 理解  class 对于 class 来说,表示一个代码块规定了实例化后的 object 的属性和方法 但是在 Python 中,class 本身也是对象.定义一个 class,就相当于在内存中 ...

  2. 【技术博客】nginx服务器的https协议实现

    在本学期软件工程的Alpha和Beta阶段,我们的服务器部署都是使用基础的http协议,http在网络路由间的信息转发都为明文,这对我们网站的账户密码登录来说很不安全,因此在Gamma阶段我们实现了h ...

  3. 【计算机视觉】【ARM-Linux开发】Ubuntu14.04下安装opencv3(anaconda3 Python3.6)

    首先附上一个stackoverflow上看到的问题:https://stackoverflow.com/questions/38787748/installing-opencv-3-1-with-an ...

  4. 文本编辑 工具vim

    一vim的3种常用模式:一般模式.编辑模式和命令模式 如果系统里没有vim工具,需安装 1,一般模式 首先复制一个文件到/tmp/目录下,并改名为1,txt 移动光标: h 或 向左箭头键(←)    ...

  5. unity延迟加载图片

    把加载图片所需要的信息封装成一个任务(自己写的类,包括路径,回调等信息),再将该任务添加到自己写的任务池中(在update中执行任务委托),由于只是添加任务操作,加载完成后自动调用回调函数实例化,对主 ...

  6. [转帖]SQL Server 2000~2017补丁包

    SQL Server 2000~2017补丁包 https://www.cnblogs.com/VicLiu/p/11510510.html 最新更新 Product Version Latest S ...

  7. [转帖]浅谈P2P、P2C 、O2O 、B2C、B2B、 C2C的区别

    浅谈P2P.P2C .O2O .B2C.B2B. C2C的区别 https://www.cnblogs.com/zhuiluoyu/p/5481635.html 相信有很多人对P2P.P2C .O2O ...

  8. Effective.Java第78-90条(同步相关)

    78.  同步访问共享的可变数据 为了在线程之间进行可靠的通信,也为了互斥访问,同步是必要的. 不共享可变的数据.要么共享不可变的数据,要么压根不共享.换句话说,将可变数据限制在单线程中. 当多个线程 ...

  9. MarkDown的常规用法

    MarkDown的常规用法 标题 # 一级标题 ## 二级标题 ... ###### 六级标题 列表 第二级 - 和 空格 + 和 空额 * 和 空格 第三级 代码块 多行代码块 3个` 回车 单行代 ...

  10. 『线段树及扫描线算法 Atlantis』

    入门看这边『线段树 Segment Tree』. 扫描线 扫描线是一种解决一类平面内统计问题的算法,通常会借助线段树来实现,我们通过一道例题来引入这个算法. Atlantis Description ...