编写登入界面login

路由

1. hash模式（网址上带#号）
2. hlstory模式（网址上没有#号，正式上线需要服务端支持）

准备登陆组件并添加路由

1. 在 src/views 新建一个 Login/indexvue 页面，用作陆页面
2. 在router 文件里去写路由规则
3. 在app.vue 页面写路由出口

使用vue-router的步骤 

• 第一步:创建路由组件
• 第二步:配置路由映射:组件和路径映射关系
• 第三步: 使用路由:通过<router-link>和<router-view>

路由重定向 

 引入NavBar 导航栏

在src/utils/vant.js文件中 做vant组件的导入

 在login登入界面写入vant使用代码

@符号是v-on事件绑定的简写 可以直接在后面绑定某个事件 也可以绑定绑定某个时间名 然后在methods方法里具体阐述这个事件

引入导航栏组件写导航栏

使用表单布局写表单

根据vant已有的rule数据结构来写手机号和验证码的校验

写入正则去验证手机号和验证码

<template>
    <div>
        <van-nav-bar left-arrow />

        <van-form @submit="onSubmit">
            <van-field v-model="username" label="手机号" placeholder="输入手机号" :rules="module" />
            <van-field v-model="password" type="password" label="验证码" placeholder="输入验证码" :rules="code" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登入</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            rulrs: {
                // 手机号
                mobile: [
                    { required: true, message: '输入手机号' },
                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '手机号不合法' }
                ],
                // 验证码
                code: [
                    { required: true, message: '验证码' },
                    { pattern: /^[0-9]{6}$/, message: '验证码不对' }


                ]
            }

        }
    },

    methods: {
        onSubmit(values) {
            console.log('submit', values);
        },
    },
};
</script>

<style></style>