Vue + Vant：快速构建一个响应式的移动端登录页面

前言

在移动互联网时代，为用户提供优秀的移动端体验至关重要。本文将引导您通过一系列步骤，使用Vue.js框架和Vant UI组件库，从零开始搭建一个响应式的移动端登录页面。

正文

创建vue项目

首先创建文件夹note-book，输入指令npm create vue@latest创建vue项目，项目名称为client，接着选择Vue Router和Pinia，其他的选择否就行。

接着要删除一些文件夹，这里不一一说明，下面放一张gif图片展示。其中npm i用于在 Node.js 项目中安装依赖包，npm i less -D安装Less包（一种CSS预处理器）。最后npm run dev开启项目。

样式初始化

样式初始化是为了创建一个可预测、一致的渲染环境，使得开发者可以专注于添加自己的设计而无需担心浏览器间的差异。在src下创建文件夹assets，在assets中创建style文件夹，最后在style中创建文件reset.css，打开CSS Reset 样式表，将下面的所有代码粘贴到reset.css文件中，这样可以为项目先提供一个基础样式。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

接着要在全局引入，在main.js中添加代码import '@/assets/style/reset.css'，这样就实现了样式初始化。

移动端适配

移动端适配（Mobile Adaptation）可以确保网站内容能在各种尺寸和类型的移动设备（如智能手机和平板电脑）上正确显示，不同用户使用不同的屏幕可以展示不同的字体大小等。

在npm官方网站中会有很多人封装了有关于移动端适配的代码，我们只需要引入即可。在终端输入npm i lib-flexible 安装 lib-flexible 包，它会根据设备的屏幕宽度动态调整根元素的字体大小，使得 rem 单位可以基于屏幕宽度进行缩放，从而实现自适应布局。

在main.js中全局引入，添加代码import 'lib-flexible/flexible.js' 修改根字体大小。

登录页面------配置路由

在views文件夹中添加文件为Login.vue，里面放上login page。接下来要给这个文件配置路由，去路由文件 router 下的index.js 中添加内容。如下所示，添加path、name和component。

import { createRouter, createWebHistory } from 'vue-router'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue')
    }
  ]
})

export default router

接下来需要配置路由路口，在App.vue中添加代码<RouterView></RouterView>，在/login路径下就可以看到内容了，如下所示。

UI框架------vant

在Login.vue中写登录页面，可以引入一些UI框架，打开组件库------Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)，在快速上手中可以详细了解怎么在项目中引入vant并使用。

在终端输入npm i vant安装vant。

接着引入组件，在main.js中添加下面的内容。在vant4中都要详细的介绍，想要引入什么样的组件都可以自行查看官方文档。

// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
// 3. 注册你需要的组件
app.use(Button);

在这个项目中需要引入Form表单，直接在官网上找就可以了。

html部分

这里面的html部分，login-wrapper是登录表单的容器，用于包裹表单相关的元素；avatar 包含一个 标签，用于展示用户头像；<van-form></van-form>标签内容则全部是引入Form表单。

<template>
    <div class="login">
        <h1>登录</h1>
        <div class="login-wrapper">
            <div class="avatar">
                <img src="https://tse2-mm.cn.bing.net/th?id=OIF-C.8QdSPXJv%2fbWWsRrhIRaCyw&rs=1&pid=ImgDetMain" alt="">
            </div>
            
            <!-- 引入的Form表单 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field 
                        v-model="username" 
                        name="username" 
                        label="用户名" 
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" 
                    />
                    <van-field 
                        v-model="password" 
                        type="password" 
                        name="password" 
                        label="密码"   
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" 
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>

        </div>
    </div>
</template>

js部分

使用 ref 创建了两个响应式引用 username 和 password，并将它们初始化为空字符串。在html中，这两个变量将被用来双向绑定表单的输入字段。onSubmit 方法接收一个参数 values，这个参数是一个对象，包含了表单中所有字段的值。当表单提交时，onSubmit 方法会被调用，并在控制台打印出提交的表单值。

<script setup>
import { ref } from 'vue'

const username = ref('')
const password = ref('')
const onSubmit = (values) => {
    console.log(values);
}
</script>

css样式

这段代码是使用 Less 语言编写的 CSS 样式，Less 是一种 CSS 预处理器，它提供了变量、嵌套规则、函数、混合（mixins）等特性，使得 CSS 更加模块化和可维护。

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding: 0 0.3rem;
    box-sizing: border-box;
    overflow: hidden;

    h1 {
        height: 0.6933rem;
        text-align: center;
        font-size: 0.48rem;
        margin-top: 1.12rem;
    }

    .login-wrapper {
        width: 7.44rem;
        height: 10.77rem;
        border: 1px solid rgba(187, 187, 187, 1);
        margin: 0 auto;
        margin-top: 1.7rem;
        border-radius: 0.3rem;
        box-shadow: 0 0 0.533rem rgba(170, 170, 170, 1);

        .avatar {
            width: 2.4rem;
            height: 2.4rem;
            margin: 1rem auto 0.77rem;
            border-radius: 50%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }
    }
}
</style>

整个样式表使用了嵌套选择器，这是 Less 提供的特性，允许以更清晰的方式组织样式规则，减少重复的类名前缀。例如，.login .login-wrapper 可以简写为 .login { .login-wrapper { ... } }，这不仅让代码更加整洁，也提高了可读性和可维护性。

效果展示

结语

这样一个登录页面就实现了，希望可以给你带来帮助！