element ui登录界面_第一个 ElementUI 页面 (登录页)

本节视频

目录结构

在源码目录中创建如下结构：

assets：用于存放资源文件

components：用于存放 Vue 功能组件

views：用于存放 Vue 视图组件

router：用于存放 vue-router 配置

创建视图

创建首页视图

在 views 目录下创建一个名为 Main.vue 的视图组件；该组件在当前章节无任何作用，主要用于登录后展示登录成功的跳转效果；

首页

export default {

name: "Main"

}

创建登录页视图

在 views 目录下创建一个名为 Login.vue 的视图组件，其中 el-* 的元素为 ElementUI 组件；

欢迎登录

登录

title="温馨提示"

:visible.sync="dialogVisible"

width="30%"

:before-close="handleClose">

请输入账号和密码

确 定

export default {

name: "Login",

data() {