使用vue2.0创建简单登录UI

建立登录页面
创建vue项目后安装npm i element-ui -S
一、路由配置

1.在 src\views 目录下新建 login 目录及此目录下新建文件 index.vue

说明：通过 import Login from ‘./views/login’ 导入组件，当前只指定了组件路径，默认导入的就是指定路径
下的 index.vue 组件

2.在 src\router.js 中配置路由（把原有的路由配置删除），如下：

import Vue from "vue";
import Router from "vue-router";
// import Login from './views/login/index.vue'
import Login from './views/login'

Vue.use(Router);

export default new Router({
routes:[
  {
    path:'/login',
    name:'login',//路由名称
    component: Login//组件对象
  }
]
});

3.路由渲染出口，在 App.vue 中, 注意样式保持一致

<template>
  <div>
    <!-- 组件渲染出口 -->
  <router-view></router-view>
  </div>
</template>

<style>
body{
  font-family: "微软雅黑";
  margin: 0px auto;
}
</style>

main.js

import Vue from "vue";
// 注意引入在 Vue的下面
//  ElementUI 组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from "./App.vue";
import router from "./router";

// 使用 ElementUI
Vue.use(ElementUI);

Vue.config.productionTip = process.env.NODE_ENV === 'production';
console.log(process.env.VUE_APP_SERVICE_URL) // 开发环境 development, 生产环境 production 

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

二、登录页面

Elemen UI文档：：https://element.eleme.cn/#/zh-CN/component/form#dian-xing-biao-dan

1.在 src\views 目录下的 index.vue 文件中添加登录表单模板
表单输入框，如果没有使用 v-model 绑定值，是不允许输入值的。

<template>
    <div class="login-container">
        <el-form ref="form" :model="form" label-width="80px" class="login-form">
            <h2 class="login-title">学生选寝系统</h2>
        <el-form-item label="账号">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="form.password" placeholder="请输入密码">             </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>

2.添加样式

注意：

将 login.jpg 图片拷贝到 src\assets 目录下

模板中添加类名 login-container 、login-form 、login-title 切记放图片

 <style scoped>
  /* 表单 */
  .login-form{
      width: 350px;
      margin: 160px auto;
      background-color: rgb(255, 255, 255,0.8);
      padding: 30px;
      border-radius: 20px;
  }
  /* 背景 */
  .login-container{
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("../../assets/login_bg.jpg");
      overflow: hidden;
  }
  /*标题*/
  .login-title{
      text-align: center;
      color: #303133;
  }
  </style>

三、表单验证

校验输入的帐号和密码都不允许为空。
通过 rules 属性传入约定的验证规则。并将 el-form-item 的 prop 属性设置为需校验的字段名即可。

1.在 el-form 上添加绑定属性 :rules=“rules” ，帐号和密码的 el-form-item 上使用 prop 指定校验字段名

<el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">

 <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码">             </el-input>
        </el-form-item>
        <el-form-item>

2.在组件实例的 data 选项中添加 rules 属性，添加后对应 label 左边会有红色

form: {
            username:'',
            password:''
        },
        rules:{
           username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
           password:[{ required: true, message: '密码不能为空', trigger: 'blur' }],
        }

3.添加提交表单处理函数， 注意换了函数名是 submitForm

<el-form-item>
          <el-button type="primary" @click="formName">登录</el-button>
        </el-form-item>

    methods: {
       submitForm(formName) {
        this.$refs[formName].validate(valid => {
            // console.log(valid)
            if(valid) {
                return false;
            }
        })
    }