JavaScript+Vue.jsWeb开发项目教程（微课版） 课件 项目4 启用Element Plus 组件库增强项目效果(任务2-任务实施)

项目4智慧公寓管理系统的前端技术栈任务4-2启用ElementPlus组件库增强项目效果1HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务背景

在持续优化前端项目、提升用户体验的征途中，我们常常会面临对现有功能进行重构与升级的需求。特别是在面对用户交互频繁、界面设计复杂的登录与注册流程时，如何通过技术手段实现更高效、更流畅的用户体验，成为我们不可回避的课题。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务效果

本任务利用Vite这一现代化前端构建工具，结合ElementPlus这一功能丰富的组件库，对项目3中的登录与注册页面进行全面的重构与优化。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施任务准备：在ch04文件夹创建一个Example4-7文件夹，并在该文件中使用Vite构建工具创建一个loginAndRegister的Vue项目。在App组件中使用<el-form>组件重构登录与注册页面的信息收集表单，同时使用ElementPlus的ElNotification组件，提示用户登录与注册的操作结果,具体代码如例4-7所示。HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施App.vue文件示例代码如下所示。<template><divclass="web"><divclass="container"id="app"><divclass="form-container"><divclass="tab"><div><p@click="toggleActivity">账号登录</p><Transition><pclass="activity"v-if="isActivity"></p></Transition></div><div><p@click="toggleActivity">注册账号</p><Transition><pclass="activity"v-if="!isActivity"></p></Transition></div></div><div><el-form:model="form"label-width="auto"style="max-width:600px"><el-form-item><el-inputv-model="form.username"placeholder="您的账号/手机号"/></el-form-item><el-form-item><el-inputv-model="form.password"placeholder="您的密码"/></el-form-item></el-form>

</div><buttonid="_js_loginBtn"@click="submit">{{isLogin?'登录':'注册'}}</button><divclass="other"><pclass="hd">用合作网站账户直接登录</p><divclass="bd"><ahref="/weibo"class="weibo">新浪微博</a><ahref="/qq"class="qq">QQ</a><ahref="/wechat"class="weixin">微信</a><divclass="clear"></div></div></div></div><divclass="image"></div></div></div></template>HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务实施<script>import{ElNotification}from'element-plus'exportdefault{data(){return{isActivity:true,isLogin:true,form:{username:'',password:''},account:[{username:'admin',password:'9521'}]}},methods:{toggleActivity(){this.isActivity=!this.isActivitythis.isLogin=!this.isLoginthis.form.username='',this.form.password=''},submit(){const{username,password}=this.formif(this.isLogin){this.account.forEach(item=>if(username===item.username){if(password===item.password){ElNotification({title:'登录成功',type:'success',})return}else{ElNotification({title:'密码错误',type:'error',})return}}{ElNotification({title:'账号错误',type:'error',})}})

}else{if(username&&password){this.account.push({username:username,password:password})ElNotification({title:'账号注册成功',type:'success',})}else{ElNotification({title:'请填写完整信息进行注册',type:'warning',})}}}}}</script>

HTML5的优势

解决了跨浏览器的问题

新增多个新特性

（语义化标签、多媒体标签、canvas元素、本地存储等）

用户优先原则

化繁为简的优势任务总结本次任务聚焦于利用Vite构建工具和ElementPlus组件