场景：

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. 词向量实践（gensim）

    词向量训练步骤: 分词并去停用词 词频过滤 训练 项目完整地址:https://github.com/cyandn/practice/tree/master/Word2Vec gensim中Word2 ...

  2. 040 RabbitMq及数据同步02

    1.Spring AMQP (1)简介 Spring有很多不同的项目,其中就有对AMQP的支持: Spring AMQP的页面:http://spring.io/projects/spring-amq ...

  3. [转帖]从 SOA 到微服务，企业分布式应用架构在云原生时代如何重塑？

    从 SOA 到微服务,企业分布式应用架构在云原生时代如何重塑? 2019-10-08 10:26:28 阿里云云栖社区 阅读数 54   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权 ...

  4. 模拟 + 暴搜 --- Help Me with the Game

    Help Me with the Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3175   Accepted: ...

  5. C基本语法

    分号 ; 在C程序中,分好是语句结束符,每个语句必须以分好结束,它表明一个逻辑实体的结束 例如: printf("Hello, World! \n"); ; 注释 // 单行注释 ...

  6. [SOJ #696]染色(2019-11-10考试)/[Atcoder MUJIN Programming Challenge C]Orange Graph

    题目大意 有一个\(n\)个点\(m\)条边的简单无向连通图,初始为白色,可以执行操作让一些边变黑,要求使得操作后的图不存在黑色的奇环,且不能使得其他的任何变黑而还符合要求.问最后有多少可能结果.\( ...

  7. ORA-01779: 无法修改与非键值保存表对应的列

    项目中通过子查询更新数据时遇到ORA-01779: 无法修改与非键值保存表对应的列,模拟过程如下: 1.创建测试表 CREATE TABLE tt1 (ID INT,col1 VARCHAR2()); ...

  8. MyBatis系列（二） MyBatis接口绑定与多参数传递

    前言 通过上一篇博文的,已经可以做到通过MyBatis连接数据库,现在再来介绍一种方法通过接口绑定SQL语句. 不使用接口绑定的方式 不使用接口绑定的方式,是通过调用SqlSession中的selec ...

  9. -Git Linux vi/vim 命令 按键 MD

    目录 目录 Linux vi/vim 简介 vi/vim 的使用 命令模式 输入模式 底线命令模式 vi/vim 使用实例 使用 vi/vim 进入一般模式 按下 i 进入输入模式,开始编辑文字 按下 ...

  10. C#读写设置修改调整UVC摄像头画面-对比度

    有时,我们需要在C#代码中对摄像头的对比度进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄 ...