前端-Vue.js的通读使用（三）-引入elementUI使用

绝地灬酷狼 2023-07-21 06:20 8阅读 0赞

**1、**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70][]

**2、**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1][]

3**、使用elementUI组件：**

**创建一个Login.vue页面，一般视图层都会新建一个views文件夹：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2][]

<template>
    <div class="login-container">
      <el-form :model="ruleForm2" :rules="rules2"
               status-icon
               ref="ruleForm2"
               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="ruleForm2.username"
                    auto-complete="off"
                    placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
                    v-model="ruleForm2.password"
                    auto-complete="off"
                    placeholder="密码"
          ></el-input>
        </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,
            ruleForm2: {
              username: 'admin',
              password: '123456',
            },
            rules2: {
              username: [{required: true, message: 'please enter your account', trigger: 'blur'}],
              password: [{required: true, message: 'enter your password', trigger: 'blur'}]
            },
            checked: false
          }
        },
        methods: {
          handleSubmit(event){
            this.$refs.ruleForm2.validate((valid) => {
              if(valid){
                this.logining = true;
                if(this.ruleForm2.username === 'admin' &&
                  this.ruleForm2.password === '123456'){
                  this.logining = false;
                  sessionStorage.setItem('user', this.ruleForm2.username);
                  this.$router.push({path: '/'});
                }else{
                  this.logining = false;
                  this.$alert('username or password wrong!', 'info', {
                    confirmButtonText: 'ok'
                  })
                }
              }else{
                console.log('error submit!');
                return false;
              }
            })
          }
        }
      };
    </script>
    
    <style scoped>
      .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>

router.config.js内容：

import Vue from 'vue'
    import  VueRouter from 'vue-router'
    
    import Login from '../views/Login'
    
    
    Vue.use(VueRouter);
    
    export default new VueRouter({
      routes: [
        {
          path: '/login',
          component: Login
        }
      ]
    })

main.js配置：

import Vue from 'vue'
    import App from './App'
    
    import router from './router/router.config'
    
    import elementUi from 'element-ui' //导入elementUI组件
    import 'element-ui/lib/theme-chalk/index.css'; //导入elementUI样式
    
    Vue.use(elementUi);
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App) //elementUI 需要这么写
    })

App.vue中加入标签即可实现：

<template>
      <div id="app">
        <router-link to="/login">登录</router-link>
        
      <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
    
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70]: /images/20230528/e4bf2a47d3f341fab2ea6ee077ab4696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1]: /images/20230528/a55abd536acd485aba1c28df963cc183.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 2]: /images/20230528/2d116eb331e041b097ca1c44f86dc25e.png