7.1开发者社区的登录界面

原创已于 2022-12-06 16:28:31 修改 · 383 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-12-06 15:51:46 首次发布

开发者社区专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用Vant UI库构建一个简单的登录页面。包括引入Vant组件、创建登录页面结构、设置样式及配置路由等内容。

示例

在这里插入图片描述

主要是用vant组件(vant网址)完成

1.登录页面
在这里插入图片描述

1.1先引入

在这里插入图片描述

1.2在views新建一个新建一个login文件夹，放登录页面的内容，后面在导入到App.vue中

在这里插入图片描述

1.3在刚刚新建的index.vue中，引入nav-bar的内容

在这里插入图片描述

1.4添加路由规则并且写路由出口

在这里插入图片描述

项目真正渲染的是app.vue页面所以我们要在app.vue页面写上一个路由出口把路由文件渲染到app.vue页面

然后运行终端，得到网址，去页面上看是否成功

在这里插入图片描述

<template>
<div>
  <van-nav-bar title="登录" class="navbar"/>

  <van-field label="手机号" placeholder="12138110119" />
  <van-field label="验证码" placeholder="12138" />

  <van-button round type="info" size="large">登录</van-button>
</div>

</template>
<script>
export default {}
</script>
<style>
.navbar{
  background-color: rgb(52, 134, 249);
}
</style>