黑马程序员前端 Vue3 小兔鲜电商项目登录页面

### 黑马程序员 Vue3 小兔鲜电商项目 登录页面实现

#### 创建并配置登录页面组件
为了创建一个功能完整的登录页面，首先需要在 `src/views` 文件夹内新建名为 `Login.vue` 的文件。此文件将作为登录页面的主要模板。

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <!-- 表单 -->
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  username: '',
  password: ''
})

// 定义验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
  ]
}

function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) console.log('submit!')
    else console.log('error submit!!')
  })
}
function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.login-container {
  width: 50%;
  margin: auto;
  padding-top: 10vh;
}
</style>

上述代码展示了如何构建一个简单的登录界面[^1]。通过使用 Element Plus 组件库中的 `<el-form>` 和其他相关标签来快速搭建表单项，并设置了基本样式使布局更加美观。

#### 添加路由映射
为了让应用程序能够访问到新建立的登录页面，在 `router/index.ts` 中添加相应的路径定义：

{
  path: '/login',
  name: 'Login',
  component: () => import('@/views/Login.vue'),
},

这一步骤确保当用户访问 `/login` URL 地址时会加载刚刚创建好的 Login 页面。

#### 测试与优化
完成以上设置之后就可以启动开发服务器测试效果了。如果一切正常，则可以在浏览器地址栏输入 http://localhost:3000/login 来查看实际显示情况。根据需求进一步调整样式或增加额外的功能特性，比如记住账号选项、验证码机制等。