vue-cli3 + elementui 搭建后台管理界面(一)-登录

比眉伴天荒 2021-08-04 22:15 986阅读 0赞

### 安装vue-cli ###

npm install vue-cli -g

### 创建项目 ###

vue create myapp

选择 **Manually select features**

![6587214-6a0922b16cd14903.png][]

1.png

![6587214-62973c1ab0ba352d.png][]

image.png

选择 **node-sass** 后面的样式就可以使用scss

![6587214-b528b24682a1ee76.png][]

image.png

### 安装并引入 element ui ###

npm install element-ui --save

编辑 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.use(ElementUI)
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

### 编写登录页面 ###

> src/views/Login.vue

<template>
      <div class="login-container">
        <el-form :model="myForm" :rules="myRule"
          status-icon
          ref="myForm" 
          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="myForm.username" 
                  auto-complete="off" 
                  placeholder="用户名"
              />
            </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" 
                    v-model="myForm.password" 
                    auto-complete="off" 
                    placeholder="密码"
                />
              </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>
    </template>
    
    <script>
    export default {
      data(){
        return {
          logining: false,
          myForm: {
            username: 'admin',
            password: '123456',
          },
          myRule: {
            username: [{required: true, message: '请输入账号', trigger: 'blur'}],
            password: [{required: true, message: '请输入密码', trigger: 'blur'}]
          },
          checked: false
        }
      },
      methods: {
        handleSubmit () {
          this.$refs.myForm.validate((valid) => {
            if (valid) {
              this.logining = true;
              if (this.myForm.username === 'admin' && this.myForm.password === '123456') {
                  this.logining = false;
                  sessionStorage.setItem('user', this.myForm.username);
                  this.$router.push({path: '/'});
              }else{
                this.logining = false;
                this.$alert('账号或密码错误', '温馨提示', {
                    confirmButtonText: '确定'
                })
              }
            }else{
              console.log('error submit!');
              return false;
            }
          })
        }
      }
    };
    </script>
    
    <style>
    .login-container {
      width: 100%;
      height: 100%;
    }
    .login-page {
      -webkit-border-radius: 5px;
      border-radius: 5px;
      margin: 180px auto;
      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>

### 增加路由 ###

访问 login 要跳转到登录页面  
修改 router/index.js 为

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login.vue'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/login',
        name: 'login',
        component: Login
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

访问 [http://127.0.0.1:8080/login][http_127.0.0.1_8080_login] 出现登录页面:

![6587214-d521544fff31fbf9.png][]

TIM图片20200115155516.png

文章改编自大神博客：[https://www.cnblogs.com/wbjxxzx/p/9942648.html][https_www.cnblogs.com_wbjxxzx_p_9942648.html]，仅作为学习实践。

[6587214-6a0922b16cd14903.png]: /images/20210804/b782b6802a0b4a27b74564bb13abb4d7.png
[6587214-62973c1ab0ba352d.png]: /images/20210804/12d503b352f1488e93171ee9743c814b.png
[6587214-b528b24682a1ee76.png]: /images/20210804/a312221d03144bdcaba0249125e4288e.png
[http_127.0.0.1_8080_login]: https://links.jianshu.com/go?to=http%3A%2F%2F127.0.0.1%3A8080%2Flogin
[6587214-d521544fff31fbf9.png]: /images/20210804/504c06e67b5b4c1091e384b15e44e19c.png
[https_www.cnblogs.com_wbjxxzx_p_9942648.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Fwbjxxzx%2Fp%2F9942648.html