vue-admin-element登录页面改造

最新推荐文章于 2024-08-20 09:10:04 发布

在努力的前端小白

最新推荐文章于 2024-08-20 09:10:04 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57731044/article/details/132226527

版权

一、引入Element-UI

Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN，该网站为我们提供了丰富的组件样例，点击网站中的“显示代码”，复制需要部分。使用npm进行安装npm i element-ui -S
根据官方文档，我们这里将进行全部引入，修改src/main.js如下：

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'

Vue.config.productionTip = false

// 设置反向代理
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8663/api'

// 全局注册，其他组件可通过this.$axios发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

// eslint-disable-next-line no-undef
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

二、以登录界面优化为例

首先去掉原Vue自带的logo，删除App.vue组件中<img src="./assets/logo.png">
对于界面设计，我们只需关注vue组件中<template> 标签内的 html 和 <style> 标签内的 css。

登录上面element的网站，该网站提供了丰富的样例，一般设计到布局的我们可以用Form或Layout组件，这里我们用Form

复制修改Login.vue组件中<template>添加所需页面元素如下：

<template>
  <body id="poster">
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">Carmen系统登陆</h3>
      <el-form-item>
        <el-input type="text" v-model="loginForm.name" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="loginForm.passwd" 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>

效果如下：

为了更加美观，增加CSS样式，如下：

.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;
  }

  #poster {
    background:url("../assets/bg1.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
  }

效果如下：