场景：

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. springboot做api服务时不使用thymeleaf的相关警告DefaultTemplateResolverConfiguration 的消除

    springboot在不配置thymeleaf相关属性的情况下,会提示如下的问题 DefaultTemplateResolverConfiguration - Cannot find template ...

  2. prometheus自定义监控指标——入门

    grafana结合prometheus提供了大量的模板,虽然这些模板几乎监控到了常见的监控指标,但是有些特殊的指标还是没能提供(也可能是我没找到指标名称).受zabbix的影响,自然而然想到了自定义监 ...

  3. html5滚动页面简单写法

    html5滚动页面简单写法纵向滚动比较简单 直接在外面加个高度 然后overflow-y: auto; 横向比较复杂了外面写两层 最外面一层写个宽度 overflow-x: auto;第二层 写wid ...

  4. HTTP漫谈

    一.说明 1.1 当前背景说明 很多web的书包括web安全的书都会有一章介绍http协议,我就总恶意揣测作者是在凑字数,一般都直接跳过去. 相比TCP/IP这种各字段基于数值代号的协议,http这种 ...

  5. [转帖] db file sequential read及优化

    http://blog.itpub.net/12679300/viewspace-1185623/ db file sequential read及优化 原创 Oracle 作者:wzq609 时间: ...

  6. linux 重启jmeter服务

    #!/bin/bash #jmeter kill and start echo -e '\033[32m--------Jmeter---------------\033[0m' echo " ...

  7. Intellij IDEA 中的 Debug 控制台输出窗口不见了的解决办法

    在 Debug 工具窗口,如图点击左侧重置布局图标,你的console窗口就还原了.

  8. Django 路由正则URL

    Django 路由正则URL URL1 # 路由 url(r'^detail/', views.detail) {#点击跳转到指定用户下显示信息#} <li><a target=&q ...

  9. 【题解】整数划分 [51nod1201] 整数划分 V2 [51nod1259]

    [题解]整数划分 [51nod1201] 整数划分 V2 [51nod1259] 传送门:整数划分 \([51nod1201]\) 整数划分 \(V2\) \([51nod1259]\)** [题目描 ...

  10. Java开发月薪2W的知乎讨论记录截取

    1. 推荐看 作者:匿名用户 链接:https://www.zhihu.com/question/39890405/answer/83676977 来源:知乎 著作权归作者所有.商业转载请联系作者获得 ...