css @import'./src/theme/common.module.scss';.login-container{width:100vw;height:100vh;background: $bg-clr07;position: relative;overflow: hidden;.login-container-content{display: block;overflow: hidden;position: absolute;width:1920px;height:937px;top:50%;left:50%;transform:translate(-50%, -...
1、定义路由实现页面跳转,跳转到登录界面 2、Login.vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" ></el-input> </el-form-item> <el-form-item label="密码" pr...
import 'element-ui/lib/theme-chalk/index.css' //新添加2,避免后期打包样式不同,要放在import App from './App';之前 import App from './App' import router from './router' Vue.use(ElementUI) //新添加3 Vue.config.productionTip = false 1.5:main.js import Vue from 'vue' import App from ...
css/Eleindex.css"> <!-- 引入组件库 --> <el-container> <el-header>XXXX</el-header> <!--主体内容--> <el-main> <el-row> <el-col :span="8" :offset="8"> 用户登录 账号:<el-input v-model="adminUser.username" placeholder="账号"></el-input> 密码:<el-input type="passw...
import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App), }).$mount("#app"); 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. ...
1.3.3、使用ElementUI美化登录页面 现在开始使用 ElementUI和 css美化我们的登录界面,修改后的login.vue代码如下: <template> <el-form class="login-container" label-position="left" label-width="0px"> 系统登录 <el-form-item> <el-input type="text" v-model="loginForm.loginName" auto-complete="...
上面可以看到我们引入了第三方图标样式文件iconfont.css和全局样式表。设置Vue.prototype.$http = axios,这样所有vue实例就可以直接用this.$http进行网路请求。 axios.defaults.baseURL = '/api',主要用来设置网络请求路径,也可以加上前面的ip地址,不过如果仅仅在这里加入ip地址进行请求的话,会出现跨域的问题。如下 ...
// 回到登录界面 this.$router.push({ path: '/' }) } }).catch(res => { alert(res.data.msg); }) } else { alert("两次输入的新密码不同") } } } } <!-- 添加“scoped”属性以将CSS仅限于此组件 --> 成功页面 Success.vue <...
因为在注册界面需要使用用户上传组件,根据Element官方文档,进行了用户头像上传全局样式的编写 将assets/css/global.css文件的代码修改为如下所示: /* 全局样式 */ html,body,#app{ height: 100%; width: 100%; padding: 0; margin: 0; } /* 用户头像上传 */ ...
微服务和VUE入门教程(1): 搭建前端登录界面 前言: 我们使用前端框架为ElementUI,和bootstrap差不多,但更适合VUE双向数据绑定和组件化的特性。 ElementUI官网: https://element.eleme.cn/#/zh-CN/component/installation 熟悉bootstrap的话,上手很快,ElementUI基本就是在bootstrap的基础上做的,但是相对bootstrap来说...