vue-cli + element 简单的登录注册功能 搭建流程

一. 创建项目

vue create login_reg

初始化完成 可以看到页面

------------------------------------------------------------------

                                正式开始

------------------------------------------------------------------

二. 在components目录下新建两个目录和文件

login/myLogin.vue

reg/myReg.vue

router目录下的index.js 设置登录页和注册页的路由

import myLogin from '@/components/login/myLogin'
import myReg from '@/components/reg/myReg'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: myLogin
  },
  {
    path: '/reg',
    component: myReg
  }
]

 此时能看到基本的路由效果

三. 导入element-ui 和其他依赖文件

1. 添加图片标题 和 public.css

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. yarn add element-ui 或者 npm i element-ui

 main.js新增内容

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/public.css'
Vue.use(ElementUI)

四. 编写登录页 myLogin.vue 的内容

1. App.vue 添加 id="app"

2. myLogin.vue 写好css样式 / 表单 和 对应的验证

<template>
  <div class="login_box">
    <div class="login_form">
      <div class="login_title"></div>
      <el-form ref="form" :model="form" :rules="rules" class="el_form">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login_btn" @click="submitBtn">登录</el-button>
          <el-link type="primary" @click="$router.push('./reg')">注册</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitBtn () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_box{
  height: 100%;
  background-color: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_form{
    width: 540px;
    height: 270px;
    background-color: #fff;
    .login_title{
      height: 60px;
      background: url(../../assets/login_title.png) no-repeat center;
    }
    .el_form{
      padding: 0 20px;
      .login_btn {
        width: 100%;
      }
    }
  }
}
</style>

3. 效果图↓

 

 五. 编写注册页 myReg.vue 的内容

<template>
  <div class="login_box">
    <div class="login_form">
      <div class="login_title"></div>
      <el-form ref="form" :model="form" :rules="rules" class="el_form">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="qr_password">
          <el-input v-model="form.qr_password" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login_btn" @click="submitBtn">注册</el-button>
          <el-link type="primary" @click="$router.push('./login')">登录</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    const checkQrPwd = (rule, value, callback) => {
      setTimeout(() => {
        if (value !== this.form.password) {
          callback(new Error('请输入相同密码'))
        } else {
          callback()
        }
      }, 300)
    }
    return {
      form: {
        username: '',
        password: '',
        qr_password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        qr_password: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: checkQrPwd, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitBtn () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login_box{
  height: 100%;
  background-color: #e6e6e6;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_form{
    width: 540px;
    height: 340px;
    background-color: #fff;
    .login_title{
      height: 60px;
      background: url(../../assets/login_title.png) no-repeat center;
    }
    .el_form{
      padding: 0 20px;
      .login_btn {
        width: 100%;
      }
    }
  }
}
</style>

注册页效果↓