场景：

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. [转帖]【Ubuntu】Ubuntu 各版本代号简介

    [Ubuntu]Ubuntu 各版本代号简介 https://www.jianshu.com/p/7b351fde8799 一.版本及代号说明 Ubuntu中,每个版本都有一个更为特色的名字,这个名字 ...

  2. 天际PRO-CR16 改装方案

    本人现有红色CR16一台,宿舍在7楼,最近找了一份长期兼职,不想挤公交,想骑车去,经常上下楼很是痛苦,琢磨了两天两夜,终于出来第一套小该方案,有不合理地方,或者有个好的零件选择,请各位指点.本人不胜感 ...

  3. idea 本地调试，修改代码，代码自动生效

    修改1: 修改2: ctrl+shift+a 弹出页面中搜索“registry” 修改3:修改configerations

  4. git实战中遇到git@github.com: Permission denied (publickey).的问题

    一.问题我们在使用git的时候会建立一个私钥和一个公钥来完成彼此的通讯,因此如何使用给一个指令建立一个秘钥至关重要.但是我在实践的过程中出现了git@github.com: Permission de ...

  5. 『Broken Robot 后效性dp 高斯消元』

    Broken Robot Description 你作为礼物收到一个非常聪明的机器人走在矩形板上.不幸的是,你明白它已经破碎并且行为相当奇怪(随机).该板由N行和M列单元组成.机器人最初位于第i行和第 ...

  6. 一起来学习.net core程序使用中介者模式:MediatR插件

    中介者模式是一种常见的设计模式,旨再降低程序的耦合性,因为传统的三层模式层层之间需要显示的调用,必须上层依赖下层,耦合性很高,为了解耦,将所有的指令单独放在一个位置处理,其他位置均通过这个位置来间接的 ...

  7. .net core mvc启动顺序以及主要部件4-MVC

    前面三章已经把MVC启动过程以及源代码做了讲解,本章开始正式MVC,mvc全称叫model view controller,也就是把表现层又细分三层,官网的图片描述: 默认创建了一个.net core ...

  8. NET MVC 上传文件

    1.HTML @using (Html.BeginForm("UploadFile", "Student", FormMethod.Post, new { en ...

  9. 用lambda表达式写左联查询的示例

    需要完成的查询逻辑:A表内联B表,B表左联C表,A表左联D表,并且 C表的TotalCount>23,D表的ClassHour>8,最后查出A表的Id,代码如下: IQueryable&l ...

  10. Spring Security 解析(五) —— Spring Security Oauth2 开发

    Spring Security 解析(五) -- Spring Security Oauth2 开发   在学习Spring Cloud 时,遇到了授权服务oauth 相关内容时,总是一知半解,因此决 ...