Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

旧城等待， 2022-12-27 12:51 317阅读 0赞

## Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标 ##

博主很久之前就想使用Element-UI，总是因为需要学习后端技术鸽了很久（博主目前是偏后端），这里博主通过Vue项目来整合Element-UI。

## 引入Element-UI ##

**npm安装**

Vue项目整合Element-UI会用到，这里博主介绍一下。

npm i element-ui -S

*  **`i`**：是`install`的简写。
 *  **`-S`**：即`--save`（保存），包会被注册到`package.json`的`dependencies`里面。

E:\workspace\WebStorm\blog\project>
    E:\workspace\WebStorm\blog\project>npm i element-ui -S
    ...
    + element-ui@2.14.1
    added 6 packages from 6 contributors in 7.474s

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]  
在Vue项目入口文件`main.js`中添加：

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]  
这样就可以在Vue项目中使用Element-UI了。

修改`App.vue`：

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <i class="el-icon-platform-eleme"></i>
        <i class="el-icon-delete-solid"></i>
        <i class="el-icon-loading"></i>
        <p class="el-icon-folder-add"></p>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'App'
    }
    </script>
    
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

很明显Element-UI使用成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]  
**CDN**

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

建议使用CDN引入Element-UI时锁定版本，以免将来Element-UI升级时受到非兼容性更新的影响。

如版本`2.14.1`：

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>

引入这些文件后，就可以使用Element-UI了。

效果和上面是一样的，Element-UI使用成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]  
Javascript文件引入顺序如下，因为Element-UI是基于Vue2的，所以要先引入Vue。

## Icon图标 ##

Element-UI提供了一套常用的图标集合。直接通过设置类名为`el-icon-iconName`来使用即可，上面的代码中也有涉及。

查看有哪些图标：

*  [图标集合][Link 1]

## 自定义Icon图标 ##

Element-UI提供的图标还是有限的，所以需要自定义`Icon`图标，通过下面代码就可以自定义`Icon`图标，很简单吧（知道CSS即可）。

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>images</title>
        
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
        
        <script src="../js/vue.js"></script>
        <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    </head>
    <body>
      <div id="app">
          <i class="el-icon-platform-eleme"></i>
          <i class="el-icon-delete-solid"></i>
          <i class="el-icon-loading"></i>
          <p class="el-icon-folder-add"></p>
          <p class="el-icon-dog"></p>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </body>
    </html>
    <style> .el-icon-dog{ background: url(../img/dog.png) center no-repeat; /*使用自己的图片来替换*/ background-size: contain; } .el-icon-dog:before{ content: "dog"; /*before属性中的content文本是用来占位的,必须有*/ font-size: 50px; /*可以设置字体大小来确定图标大小*/ visibility: hidden; /*使用visibility: hidden;来隐藏文字*/ } </style>
    <script> var vue = new Vue({ el: '#app' }) </script>

效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]  
很明显效果符合预期。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]

Vue项目整合Element-UI、Icon图标以及自定义Icon图标就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]: /images/20221120/d7b7d4f2cae24b77bdbd4b69cab5ff5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]: /images/20221120/824135c289514e1bb076665a3c8b553f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]: /images/20221120/a5dc8b1ab7fa44759f64934672f75695.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]: /images/20221120/d42a2a0470a1492cb400c534fc4a2af0.png
[Link 1]: https://element.eleme.cn/#/zh-CN/component/icon#tu-biao-ji-he
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]: /images/20221120/d2754cf80542489094f5481442d9b581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]: /images/20221120/b90113b3fef64832b5bca1665ff60ecc.png