基于elemenui 写一个前端登录页面

好的，我可以为您提供一些参考代码:

HTML部分:

<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="max-width:400px;margin:0 auto;">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">登录</el-button>
  </el-form-item>
</el-form>

JavaScript部分:

import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapGetters('user', ['token']), //使用vuex，获取token
  },
  methods: {
    ...mapActions('user', ['login']), //使用vuex，调用login方法
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.login(this.form).then(() => { //调用login方法，登录成功后跳转到主页
            this.$router.push({ path: '/' });
          });
        } else {
          return false;
        }
      });
    }
  }
};

这个登录页面是基于ElementUI写的，当用户输入用户名和密码后，会调用vuex的login方法，向后端发送请求进行验证，验证成功后用户将被重定向到主页。若有其他问题，欢迎随时提问。