Vue实现简单登录界面 Vue实现简单登录界面

【Vue实现简单登录界面】本文实例为大家分享了Vue实现简单登录界面的具体代码，供大家参考，具体内容如下
实现：

界面实现
表单规则校验
结合后台 api 校验
提示消息

App.vue

登录页面login.vue

.login_container {background-color: #2b4b6b; height: 100%; } .login_box {height: 300px; width: 450px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; // 横轴，纵轴transform: translate(-50%, -50%); .ava_box {height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img {width: 100%; height: 100%; border-radius: 50%; background-color: #eee; }}.btns{display: flex; justify-content: flex-end; }.login_form{position: absolute; bottom: 0px; width: 100%; padding: 0 20px; box-sizing: border-box; }}

element.js

import Vue from 'vue'import { Button, Form, FormItem, Input,Message } from 'element-ui'Vue.prototype.$message=MessageVue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)Vue.use(Message)

main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import './plugins/element.js'import './assets/css/global.css'import axios from 'axios'Vue.config.productionTip = falseaxios.defaults.baseURL=''Vue.prototype.$http=axiosnew Vue({router,render: h => h(App)}).$mount('#app')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。