vue项目如何使用iconfont，并使用Element-ui绘制登录表单

1.首先说一说Vue项目如何引用Element-ui组件

首先不用说，去到Element-ui的官网：https://element.eleme.cn/#/zh-CN

然后点击到组件页面，找到你想要的组件内容，这里我是要绘制一个登录表单界面，所以我找到的是form表单组件和button组件，如下图：

我想要的是上图的活动名称输入框，然后点击下面的显示代码

然后粘贴你想要的代码到你的界面vue文件中，我的是login.vue文件，我引入的的代码如下

 <!-- 登录表单区域 -->
          <el-form class="login_form">
            <!-- 账号区域 -->
            <el-form-item>
                <el-input prefix-icon="iconfont icon-zhanghao" ></el-input>
            </el-form-item>
            <!-- 密码区域 -->
            <el-form-item>
                <el-input prefix-icon="iconfont icon-mima"  ></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="login_btn">
                <el-button type="primary" class="login_button">登录</el-button>
                <el-button type="info" class="login_button">重置</el-button>
            </el-form-item>
          </el-form>

引入之后我们就需要在plugins下的element.js文件下引入相应的组件，否则会报错识别不了上述标签元素

import { Button, Form, FormItem, Input, Row } from 'element-ui'
// 通过Vue.use将组件注册为全局可用
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Row)

这里前提是你的项目导入了element-ui这个依赖包哦

这里需要注意的是，导入的时候不要写多个import，如果写多个import导入组件的话，可能会报

Disallow duplicate imports (no-duplicate-imports)，这个错误

这里就能成功的使用Element-ui的组件啦，后买你只需要自己简单的调整样式即可

接下来如何使用iconfont的库呐

首先在element-ui官网上找到input输入框组件，找到带icon的输入框，然后打开下方的显示代码

 

在input标签中加入上图框住的代码，冒号中是element-ui中的icon图标的id，如果没有你需要的图标，则你可以引用iconfont里的图标

1、打开 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2  icon-font官网

 选择自己喜欢的图标，并且添加购物车

2、点击购物车，添加至项目

 

 

3、下载至本地

将下载的文件重命名为fonts，然后将其放置到文件目录>src>assets目录下

然后在项目文件main.js文件中导入我们的图标

 

之后在你需要使用图标的.vue文件中，我的是Login.vue

prefix-icon后添加相应的类名即可，如下图

 

你下载到本地的icon-font，打开其中的demo_index.html，如下图

 

进去后页面如下，正在上传…重新上传取消

到这就大功告成啦，下面为总体效果图