Vue项目中使用Element-ui

分手后的思念是犯贱 2023-07-08 02:42 1阅读 0赞

说明：这里我通过一个简单的登录组件，来演示如何在vue项目中使用Element-ui

# 按需导入element-ui组件 #

打开src目录，找到plugins目录下的element.js文件，导入需要的组件

import Vue from 'vue'
    // 按需导入element-ui组件
    import {  Button, Form, FormItem, Input, Row, Col, Message } from 'element-ui'
    
    // 按钮
    Vue.use(Button)
    // 表单
    Vue.use(Form)ppe
    Vue.use(FormItem)
    // 输入框
    Vue.use(Input)
    // 布局
    Vue.use(Row)
    Vue.use(Col)
    
    // 消息提示挂载到vue
    Vue.prototype.$message = Message

# 在组件中使用element-ui #

在src目录下的，components目录下，新建一个Login.vue文件

具体的element-ui文档，这里不在详细介绍，需要的话请到element-ui官网查询

<template>
      <div class="login_container">
        <div class="login_box">
          
          
          
          
          <el-form
            class="loginForm"
            label-width="0px"
            :model="loginForm"
            :rules="loginFormRules"
            ref="loginFormRef"
          >
            <div class="loginTitle">
              <h1>数据系统平台</h1>
            </div>
            <el-form-item prop="account">
              <el-input prefix-icon="fas fa-user" v-model="loginForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="fas fa-lock"
                v-model="loginForm.password"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-row>
                <el-col :span="12" class="btns">
                  <el-button type="primary" @click="userLogin">登录</el-button>
                </el-col>
                <el-col :span="12" class="btns">
                  <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    export default { 
      data() { 
        return { 
          // 登录表单数据
          loginForm: { 
            account: '',
            password: ''
          },
          // 表单校验规则,trigger指定什么时候触发校验
          loginFormRules: { 
            account: [
              {  required: true, message: '请输入账号', trigger: 'blur' },
              { 
                min: 4,
                max: 20,
                message: '账号长度在 4 到 20 个字符',
                trigger: 'blur'
              }
            ],
            password: [
              {  required: true, message: '请输入密码', trigger: 'blur' },
              { 
                min: 6,
                max: 15,
                message: '密码长度在 6 到 15 个字符',
                trigger: 'blur'
              }
            ]
          }
        }
      },
      methods: { 
        // 用户登录
        userLogin() { 
          // 登录前校验
          this.$refs.loginFormRef.validate(valid => { 
            if (!valid) return
            // todo 校验通过
            this.$message.success('执行登录操作')
          })
        },
        // 重置登录表单,这里的loginFormRef是上面指定的，其他的是固定写法
        resetLoginForm() { 
          this.$refs.loginFormRef.resetFields()
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    // 登录容器
    .login_container { 
      background-color: #2b4b6b;
      height: 100%;
    }
    
    // 登录盒子
    .login_box { 
      width: 450px;
      height: 276px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    //登录表单
    .loginForm { 
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    
    // 按钮区域
    .btns { 
      display: flex;
      justify-content: center;
    }
    
    // 登录表单标题
    .loginTitle { 
      text-align: center;
    }
    </style>

# 设置路由 #

打开src目录，找到router目录下的index.js文件

import Vue from 'vue'
    import VueRouter from 'vue-router'
    // 导入登录组件
    import Login from '../components/Login.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      // 根路径重定向到登录
      { 
        path: '/',
        redirect: '/login'
      },
      // 登录
      { 
        path: '/login',
        component: Login
      }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

# App.vue #

<template>
      <div id="app">
        
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app'
    }
    </script>
    
    <style>
    </style>

# 启动 #

npm run serve

可以从浏览看到如下界面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224171625674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70