入坑Vue(四) 引用element ui组件，配置登录

NPM安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

执行命令安装npm i element-ui -S

 

element ui 官网文档：https://element.eleme.io/#/zh-CN/component/installation

 

mian.js中 完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);

登录代码：Login.vue

<template>
<div class="login-body">

     <vue-particles
      class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >

   </vue-particles>
    <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2" 
         label-position="left" 
         label-width="0px" 
         class="demo-ruleForm login-page">
            <h3 class="title">后台管理系统</h3>
            <el-form-item prop="username">
                <el-input type="text" 
                    v-model="ruleForm2.username" 
                    auto-complete="off" 
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" 
                        v-model="ruleForm2.password" 
                        auto-complete="off" 
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
            <el-checkbox 
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
 
</div>

</template>
 
<script>
// import{postPasLogin} from '../api/userService'
export default {
    data(){
        return {
            logining: false,
            ruleForm2: {
                username: 'admin',
                password: '123456',
            },
            rules2: {
                username: [{required: true, message: '请输入你的账户', trigger: 'blur'}],
                password: [{required: true, message: '请输入你的密码', trigger: 'blur'}]
            },
            checked: false
        }
    },
    methods: {
        handleSubmit(event){
        let _this = this;
        _this.$message.success('登录成功');
        localStorage.setItem('TOKEN', "asdasdasdas",'1d')
        _this.$router.push('/home') ; 
        // postPasLogin(_this.ruleForm2.username,_this.ruleForm2.password).then(res=>{
        //     if(res.data.code!=200) return this.$message.error('用户名或密码错误！')
        //      this.$message.success('登录成功')
        //       localStorage.setItem('TOKEN', res.data.token,'1d')
        //       this.$router.push('/home')  
        // }) 
        }
    }
};
</script>
 
<style scoped>
.login-body{
  width:99.9%;
  height: 99.9vh;
  background-image: url("../assets/img/login-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;     
  
}
.login-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.login-container {
    width: 100%;
    height: 100%;
    /* background:#112346; */
 background-image: url("../assets/img/login-bg.jpg");
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* margin: 180px auto; */
    float:right;
    margin-top:200px;
    margin-right:10%;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>

注意替换背景图片

我这用的是iview 登录背景图

 

 

界面效果如下