**一个醒目的标题，突出应用程序的名称和目的。

2023-09-25 08:50:29

Vue3-huohuo-admin：打造出色首屏和登录页面的艺术

摘要

欢迎来到Vue3-huohuo-admin系列教程的第二章！在这一部分，我们将深入探讨首屏和登录页面设计的艺术，为您的应用程序奠定坚实的基础。我们将逐步指导您完成实现过程，并提供最佳实践和代码示例，以帮助您创建直观且令人印象深刻的用户体验。

首屏：应用程序的门户

首屏是用户首次接触您的应用程序时所看到的页面。因此，至关重要的是，它必须清晰简洁，瞬间抓住用户的注意力。在Vue3-huohuo-admin中，我们将创建以下首屏元素：

热情洋溢的欢迎信息： 用一句发自内心的欢迎词迎接用户，让他们倍感宾至如归。
便捷的快速链接： 提供一个精心策划的常见任务和资源列表，为用户提供即时访问。

登录页面：安全和无缝的入口

登录页面是用户进入应用程序的核心门户。我们的目标是创建一个安全可靠的界面，同时提供无缝的用户体验。在Vue3-huohuo-admin中，我们的登录页面将包含以下字段：

用户名字段： 让用户输入他们的用户名。
密码字段： 要求用户提供他们的密码。
登录按钮： 在用户输入凭据后触发登录请求。
忘记密码链接： 为忘记密码的用户提供便捷的重置选项。

实现过程

让我们深入了解如何使用Vue3在src/views文件夹中创建两个组件：Home.vue和Login.vue。

Home.vue：首屏组件

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ welcomeMessage }}</p>
    <ul>
      <li v-for="link in links" :key="link.id">
        <a :href="link.url">{{ link.text }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue3-huohuo-admin',
      welcomeMessage: '欢迎使用Vue3-huohuo-admin！',
      links: [
        { id: 1, url: '/users', text: '管理用户' },
        { id: 2, url: '/roles', text: '管理角色' },
        { id: 3, url: '/permissions', text: '管理权限' },
      ],
    };
  },
};
</script>

Login.vue：登录组件

<template>
  <div>
    <form @submit.prevent="submitLogin">
      <label for="username">用户名：</label>
      <input id="username" v-model="username" type="text" />
      <br />
      <label for="password">密码：</label>
      <input id="password" v-model="password" type="password" />
      <br />
      <button type="submit">登录</button>
      <a href="/forgot-password">忘记密码？</a>
    </form>
  </div>
</template>

<script>
import { login } from '@/api/auth';
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    async submitLogin() {
      const { data } = await login({ username: this.username, password: this.password });
      if (data.token) {
        // 登录成功，保存token并跳转到主页
        localStorage.setItem('token', data.token);
        this.$router.push('/');
      } else {
        // 登录失败，显示错误信息
        alert('登录失败！');
      }
    },
  },
};
</script>