Vue之ElementUI实现登陆及注册

前言

        在上一期的博客中我给各位老铁带来了有关Vue之vue-cli搭建SPA项目，上期的博客就是为本期博客做铺垫。今天我给老铁们带来有关ElementUI实现登陆及注册的案例实现模拟。

一、ElementUI简介

1. 什么是ElementUI

        ElementUI 是一个基于 Vue.js 的前端 UI 框架。它提供了丰富的可复用组件，使开发者可以快速构建现代化的 Web 应用程序界面。ElementUI 的组件库包括按钮、输入框、表格、弹窗、导航菜单等常用组件，同时还提供了一些高级组件如日期选择器、时间选择器、下拉框等。ElementUI 具有高度的定制性和扩展性，开发者可以根据自己的需求进行定制和拓展。它的简洁美观的设计风格得到了广大开发者的喜爱，广泛应用于各种 Web 项目中。

2. 使用ElementUI的优势

运用ElementUI的优势

优势	说明
丰富的组件库	ElementUI 提供了大量常用的组件，例如按钮、表单、表格、弹窗等，这些组件可以快速构建出现代化的用户界面。
响应式布局	ElementUI 的组件都支持响应式布局，能够适应不同设备的屏幕尺寸。这使得开发者可以轻松地实现移动端和桌面端的适配。
简洁美观的设计	ElementUI 遵循现代化的设计原则，采用扁平化风格和细致的交互细节，使得用户界面看起来美观、舒适。
定制性和扩展性	ElementUI 提供了丰富的定制选项和插槽机制，开发者可以根据自己的需求对组件进行个性化定制，也可以扩展组件功能。
良好的文档和社区支持	ElementUI 提供了详细的文档和示例代码，开发者可以轻松上手并解决问题。此外，ElementUI 拥有活跃的社区，开发者可以在社区中获得帮助、分享经验。

3. ElementUI的应用场景

ElementUI 可以应用于各种 Web 开发项目场景，包括但不限于以下几个方面：

1. 后台管理系统：ElementUI 提供丰富的组件库和布局系统，非常适合构建后台管理系统。开发者可以利用 ElementUI 的表格、表单、弹窗等组件，快速构建出功能完善、美观易用的后台界面。

2. 数据可视化应用：ElementUI 的数据展示组件如图表、进度条等，以及布局组件可以帮助开发者构建数据可视化的界面。开发者可以利用 ElementUI 提供的图表组件，实现数据的可视化展示和交互。

3. 前端项目快速原型开发：ElementUI 的组件丰富而易用，适合用于快速原型开发。对于需要快速实现界面展示和交互的项目，可以选择使用 ElementUI 来快速搭建界面原型，并在后续迭代中进行调整和优化。

4. 移动端应用开发：ElementUI 配合 Vue.js 的特性，可以很好地支持移动端应用开发。通过响应式布局和移动端适配，开发者可以使用 ElementUI 快速搭建适配移动端的用户界面。

二、登陆注册前端界面开发

我们先将之前创建的SPA项目还原成新建成后的样子，方便我们进行登陆注册前端界面开发。

1. 修改端口号

在我们编写前后端代码的时候，我们要确保前后端代码的端口号不能一致。在config文件下的index.js文件中修改port的属性值。

2.