场景：

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. 一张MGR切换的图，不解释

  2. Airtest-UI 自动化集大成者

    前言 Airtest是由网易研发的一款基于Python的.跨平台的UI自动化测试框架,基于图像识别原理,适用于游戏和App.该项目目前已在Github上面开源: https://github.com/ ...

  3. laravel如何引用外部文件

    (1).首先在app\Http\routes.php中定义路由: 1 2 3 Route::get('view','ViewController@view'); Route::get('article ...

  4. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

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

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

  6. Delphi微信支付【支持MD5和HMAC-SHA256签名与验签】

    作者QQ:(648437169) 点击下载➨微信支付            微信支付api文档 [Delphi 微信支付]支持付款码支付.二维码支付.订单查询.申请退款.退款查询.撤销订单.关闭订单. ...

  7. C语言指向函数的指针

    定义形式:类型 (*指针变量名)(参数列表); 例如:int (*p)(int i,int j); 在这里 int是函数的返回类型,*p是指向函数的指针,(int i,int j);是函数的参数 注意 ...

  8. Mysql系列（三）—— Mysql主从复制配置

    一.前言 主从复制是Mysql知识体系中非常重的要一个模块.学习主从复制和后续的读写分离是完善只是知识体系的重要环节.且主从复制读写分离的思想并不仅仅局限于Mysql,在很多存储系统中都有该方案,如: ...

  9. webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署

    本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...

  10. thinkPHP中 query()和execute()的区别

    query()执行的是查询(select)的SQL语句. execute()执行的是插入(insert)和修改(update)的SQL语句.execute()方法将返回影响的记录数. 如果在TP中使用 ...