vue结合element-ui美化登录页面

1---最终效果

2--引入element-ui:

在项目文件夹下，执行 npm i element-ui -S 即可

3--修改main.js内容：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios=require('axios')
axios.defaults.baseURL='http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/*作用是阻止vue 在启动时生成生产提示。*/Vue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: '#app',render: h=>h(App),router,                /*router 代表该对象包含 Vue Router，并使用项目中的路由*/components: { App },   /*components 表示该对象包含的 Vue 组件，*/template: '<App/>'     /*template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签*/
})

4---使用form组件美化：

其中添加body组件，引入背景图片，选一张自己喜欢的就好！

<template><body id="poster"><el-form class="login-container" label-position="left" label-width="0px"><h3 class="login_title">系统登录</h3><el-form-item><el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input></el-form-item><el-form-item style="width: 100%"><el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button></el-form-item></el-form></body>
</template><script>export default {name: "Login",data() {return {loginForm: {username: '',password: ''},responseResult: []}},methods: {login() {this.$axios.post('/login', {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse => {if (successResponse.data.code === 200) {this.$router.replace({path: '/index'})}}).catch(failResponse => {})}}}
</script><style>#poster {background:url("../assets/eva.jpg") no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;padding: 0;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}</style>

vue结合element-ui美化登录页面相关推荐

【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
2-4、React+antd页面UI美化——登录界面设计
React+Antd 实现组件的UI美化示例目标UI 创建一个页面page,用于用户登录,要求页面简洁.美观.易懂要求有背景要求引入antd登录表单组件要求有登录样式,基于antd的表单对页面 ...
Vue+JS+Element UI实战（电商项目1)
目录 1.电商业务概述 2.电商后台管理系统的功能 3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后 ...
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
vue项目云e办——登录页面（一）
云e办文章目录云e办视频学习地址前端目标效果登录页面代码视频学习地址云e办视频学习地址前端目标表单可以校验是否为空,如果为空,点击登录时弹出错误提示框. 效果登录页面代码登录页 ...
vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...

vue结合element-ui美化登录页面

vue结合element-ui美化登录页面相关推荐

最新文章

热门文章