Vue前端项目-登录组件-登录框界面

目录

1、登录框组件设计

1.1 表单元素组件注册

1.2 登录组件的结构和样式

2、Icon 图标

2.1 拷贝 font 文件夹到 asserts 目录

2.2 引入 font 的 css 样式

2.3  图标的使用

2.4 测试

---

1、登录框组件设计

需求：

登录框居于屏幕中央显示；

登录框中的表单元素分别有：用户名、密码、验证码、记住我；

效果如图：

注意:

我们使用的是 element-ui 来做界面的, 当时我们创建项目的时候 选择 组件按需导入 因此当我们第一次到某组件时候需要在

src / plugins / element.js 文件中导入该组件 并将组件绑定到 vue 对象

1.1 表单元素组件注册

在src / plugins / element.js 文件中, 引入登录组件中用到的表单对象。

element.js 代码如下:

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

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Checkbox)
Vue.use(Image)

 1.2 登录组件的结构和样式

login.vue 中 完成了登录的文本框居中 和 表单元素的添加

2、Icon 图标

给用户名、密码框的左侧添加 Icon 图标，实现效果：

2.1 拷贝 font 文件夹到 asserts 目录

font 文件夹会以 附件或百度网盘的 形式分享

2.2 引入 font 的 css 样式

在 main.js 中文件中, 引入 font 的 css 样式

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

2.3  图标的使用

2.4 测试

重写编译部署项目，即可看到效果