山东大学项目实训（二）——vue学习及登录注册界面设计及router配置（6.29、6.30）

本文记录了在山东大学项目实训中，使用Vue进行登录注册界面设计和Router配置的过程。通过学习Vue官方教程，实现了基于Element UI组件库的登录、注册界面，并初步配置了Vue Router，为后续功能开发打下基础。

这两天我们小组重新讨论了一下要设计的功能，主要得到下图结论
在这里插入图片描述
其中1为必要功能，2为首要附加功能，3为次要附加功能
项目刚开始我主要还是以学习为主，在vue的官方网站上看看教程，理解一下原理，然后着手尝试布置一开始的登录和注册界面。在界面设计的组件库上，我与另一名同学商量好使用Element组件库，并且开始边学边搭建登录的界面，最终完成以下登录界面html代码

<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">牙科数据切割与分类及可视化平台</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="phone">
                    <el-input v-model="param.phone" placeholder="phone">
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input type="pwd" placeholder="pwd" v-model="param.pwd"
                        @keyup.enter="submitForm()">
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>