从零构建 Vue3 登录页：结合 Vant 组件与 Axios 实现完整登录功能

最新推荐文章于 2025-10-25 10:50:45 发布

原创

最新推荐文章于 2025-10-25 10:50:45 发布 · 803 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在 Web 开发的世界里，登录页是用户与应用交互的第一道门槛，它的体验好坏直接影响着用户对整个应用的印象。本文将详细记录如何使用 Vue3、Vant 组件库和 Axios 构建一个兼具美观与实用的登录页面，并实现完整的登录逻辑与数据验证，带你一步步打造一个高质量的登录功能。

一、项目初始化与技术栈选择

本次项目基于 Vue3 进行开发，Vue3 以其高效的响应式系统和组合式 API，极大地提升了代码的可读性和可维护性。同时引入 Vant 组件库，它提供了丰富的移动端组件，方便快速搭建界面；Axios 则用于处理 HTTP 请求，与后端进行数据交互。

首先，确保本地已安装 Node.js 环境，使用以下命令创建一个新的 Vue3 项目：

npm init vue@latest

按照提示完成项目初始化，进入项目目录并安装 Vant 和 Axios：

cd your-project-name
npm install vant axios

在main.js中引入 Vant 组件和样式：

import { createApp } from 'vue';
import App from './App.vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Vant);
app.mount('#app');

二、页面布局与样式设计

登录页面的布局通过 HTML 模板和 CSS 样式来实现。整体页面结构如下：

<template>
    <div class="login_box">
        <img src="../assets/aircraft.png" alt="" class="aircraft" />
        <div class="login_form">
            <input placeholder="请输入手机号" v-model="phone" class="phone" />
            <input placeholder="请输入密码" v-model="password" class="password" type="password" />
            <div class="auth_links">
                <div class="user_agreement">
                    <van-checkbox-group v-model="checked" shape="square">
                        <van-checkbox name="a"&