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

最新推荐文章于 2024-08-01 00:09:18 发布

憨逗君

最新推荐文章于 2024-08-01 00:09:18 发布

阅读量677

点赞数

分类专栏： iconfont vu-cli

本文链接：https://blog.csdn.net/qq_41549657/article/details/105380889

版权

iconfont 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vu-cli

1 篇文章 0 订阅

订阅专栏

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导入组件的话，可能会报