Vue + Element-UI —— 项目实战（八）

最新推荐文章于 2024-07-01 18:30:27 发布

2401_84433807

最新推荐文章于 2024-07-01 18:30:27 发布

阅读量934

点赞数 5

分类专栏：程序员文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/2401_84433807/article/details/138297567

版权

文章详细介绍了在Vue项目中使用Element-UI实现登录界面，涉及表单验证、登录接口逻辑、菜单权限管理、Vuex状态管理以及一些Vue技术点，如双向绑定、虚拟DOM和生命周期等。

摘要由CSDN通过智能技术生成

vue + element-ui 项目演示

八、项目实战八

Ⅰ、登录界面

1. 编写 login 页面

./views/Login/login.vue，编写登录页面

	<template>
	  <!--status-icon: 在输入框中显示校验结果反馈图标 -->
	  <el-form
	    :model="form"
	    status-icon
	    :rules="rules"
	    ref="form"
	    label-width="100px"
	    class="login-container"
	  >
	    <h3 class="login\_title">系统登录</h3>
	    <!-- prop：定义在form中对应的字段 -->
	    <el-form-item
	        label="用户名"
	        label-width="80px"
	        prop="username"
	        class="username"
	    >
	        <!-- autocomplete：表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，是基于之前输入过的值。 -->
	        <el-input
	            type="input"
	            v-model="form.username"
	            autocomplete="off"
	            placeholder="请输入账号"
	        >
	        </el-input>
	    </el-form-item>
	    <el-form-item
	        label="密码"
	        label-width="80px"
	        prop="password"
	    >
	        <el-input
	            type="password"
	            v-model="form.password"
	            autocomplete="off"
	            placeholder="请输入密码"
	        ></el-input>
	    </el-form-item>
	    <el-form-item class="login\_submit">
	        <el-button type="primary" @click="login" class="login\_submit">登录</el-button>
	    </el-form-item>
	  </el-form>
	</template>
	
	<script>
	// import Mock from 'mockjs'
	import {getMenu} from '../../api/data'
	export default {
	  name: "Login",
	  data() {