element-ui的简单使用--登录表单的创建

0.利用vue脚手架创建项目

一.布局

1.登录官网https://element.eleme.cn/#/zh-CN在[组件]中找到需要的组件

https://element.eleme.cn/#/zh-CN/component/form
表单的ui组件运用

2.复制对应代码写入.vue文件中的< template >标签中

<el-form>
  <!-- 用户名 -->
  <el-form-item>
    <el-input prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <!-- 密码 -->
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" type="password"></el-input>
  </el-form-item>
  <!-- 按钮 -->
  <el-form-item>
    <el-button type="primary">登录</el-button>
    <el-button type="info">重置</el-button>
  </el-form-item>
</el-form>

若使用第三方导入的字体图标,下载后,打开示例html,根据使用步骤进行使用

(1)将下载的fonts文件夹放在资源文件夹/src/assets中
(2)在main.js中导入字体图标文件

// 导入字体图标
import './assets/fonts/iconfont'

(3)添加类名使用字体图标

<!-- 用户名 -->
<el-form-item>
  <el-input prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item>
  <el-input prefix-icon="iconfont icon-lock_fill" type="password"></el-input>
</el-form-item>

3.element-ui是按需导入的,因此需要在plugins文件夹中找到element.js中导入用到的组件

import Vue from 'vue'
import {
    Button, Form, FormItem, Input } from 'element-ui'

// 注册为全局可用的组件
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)