Vue.js3实战：构建登录页面

"这是一个关于如何在Vue.js 3中创建登录页面的示例代码。" 在Vue.js 3中创建登录页面是一个常见的需求，这里提供了一个基础的实现方式。首先，我们通过创建一个名为`login-page`的Vue组件来开始。组件包含一个表单和错误提示信息。表单有两个输入字段，分别用于输入用户名和密码，以及一个提交按钮。表单使用`@submit.prevent`事件修饰符来阻止默认的提交行为，并调用`handleLogin`方法。 在`<script>`部分，我们定义了组件的数据属性，包括`username`、`password`用于存储用户输入，以及`errorMessage`用于显示验证失败时的错误信息。`data`函数返回这些属性的初始值。`methods`对象中，我们定义了两个方法：`handleLogin`和`clearInputs`。 `handleLogin`方法负责处理登录逻辑。它检查用户名和密码是否匹配预设的“admin”和“123456”。如果匹配，可以执行相应的操作，例如使用Vue Router导航到主页。如果不匹配，将设置`errorMessage`显示错误信息。为了用户体验，验证成功后会调用`clearInputs`清理输入框内容。 `clearInputs`方法简单地将所有与输入和错误相关的数据属性重置为空字符串，以便在下次尝试登录时清除之前的信息。 在`<style scoped>`中，我们添加了一些基本的CSS样式，使登录页面居中并对输入框进行了简单的样式调整。`.login-page`类设置了页面的布局，确保登录组件在视口中心。`.login-form`类定义了输入字段的宽度和内边距，使其看起来更整洁。 这个示例展示了Vue.js 3组件化的基本思想，以及如何结合HTML、JavaScript和CSS来创建交互式的登录页面。在实际项目中，你可能需要根据设计要求和业务逻辑对这个示例进行扩展和修改，例如添加表单验证、接口调用以验证用户凭据、使用Vuex管理状态等。