场景：

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. Spring Events

    https://www.baeldung.com/spring-events by Eugen Paraschiv Spring+ I just announced the new Learn Spr ...

  2. spring boot 启动遇到报错：Failed to configure a DataSource

    spring  boot 启动遇到报错,具体如下 Description: Failed to configure a DataSource: 'url' attribute is not speci ...

  3. HashMap源码2

    public class test { @SuppressWarnings({ "rawtypes", "unchecked" }) public static ...

  4. 修改Ubuntu系统的用户名和主机名

    1.前言 当我们拿到别人拷贝的系统时,往往需要修改拷贝系统的密码.用户名和主机名,本文简单介绍在Ubuntu下如何进行相关配置文件的修改. 2.如何修改 (1)修改root的密码 运行下面的命令对对r ...

  5. python实现栈结构

    # -*- coding:utf-8 -*- # __author__ :kusy # __content__:文件说明 # __date__:2018/9/30 17:28 class MyStac ...

  6. Java安装 --- jdk 和eclipse tomcat

    ​本文主要使用win7进行安装 安装jdk jdk:  这里面有四个版本78910,会持续增加 链接:https://pan.baidu.com/s/1LTauKbBJKQVOvlbHx2dTwQ提取 ...

  7. dockerfile 命令

    FROM 功能为指定基础镜像,并且必须是第一条指令. 如果不以任何镜像为基础,那么写法为:FROM scratch. 同时意味着接下来所写的指令将作为镜像的第一层开始 语法: FROM <ima ...

  8. golang输出双精度浮点例子（Printf）

    1 package main import "fmt" func main() { var sum int = 17 var count int = 5 var mean floa ...

  9. 【转】潜说js对象和数组

    /* 数组和对象 [JavaScript 权威指南 第五版] */ /* 对象: 是一个无序属性集合, 每个属性都有自己的名字和值 */ /* 创建对象简单方法, 对象直接量 */ var obj = ...

  10. Windwos利用批处理文件自动清理归档日志，计划任务

    首先在X盘根目录建立一个文档  cmd.txt 打开cmd.txt这个文本文件,在里面第一行写入 DELETE ARCHIVELOG ALL COMPLETED BEFORE 'SYSDATE-3'; ...