【Vue2注册登录界面】Vue2+elementUI编写一个登录页面，路由式开发，后台管理系统登录界面

原创

已于 2023-03-13 20:52:33 修改 · 5.5k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-10 18:32:34 首次发布

该文章展示了如何使用Vue.js创建一个登录页面，包括模板部分（HTML结构），样式部分（使用Less编写），以及Vue组件的实现。表单验证通过自定义rules完成，提交按钮触发axios接口调用以执行登录操作。页面设计简洁，代码结构清晰。

（1）.引入封装的axios接口，方便后面联调

（2）表单

（3）.methods部分

4.完整代码

效果图

1.template部分

<div>
    <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
      <h3 class="login_title">系统登录</h3>

        <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 show-password v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

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


    </el-form>
  </div>

2.style部分

这里我用的是less编写，

需要下载less和less-loader

<style lang="less" scoped>
.login-container {
  width: 400px;
  border:1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background-color: #ffffff;
  box-siz