Element-ui与Vue结合——合理节约时间

   随着逐渐深入学习前端知识，对于所谓的写页面，不仅仅局限于传统的前端三件套。我们也可以利用vue框架，react框架去辅助我们写页面，而今天我学习了使用Element-ui组件式开发页面，这个方法大大节约了我们写页面时所花费的时间。

ELement-ui

   Elment-ui(element-plus.org/zh-CN/compo…) 它是一套广泛使用的，开源的用户界面组件库，特别是基于Vue.js框架的Web应用程序设计。它是由饿了么前端团队开发和维护的，旨在加速开发Web界面的开发过程，提供一致性和高质量的用户体验.

   首先我们进入Element-ui的官方网站，就会发现这里有各种各样的的组件

我们可以根据页面所需要的功能从中挑取对应的组件 下面我们就根据登录界面来从Element-ui组件库中获取我们所需的组件

使用ELement-ui组件库中的组件，我们需要在我们Vscode中安装好Element-ui组件库，在Element-ui官网的指南中

我们可以看到左侧的菜单栏，找到基础部分的安装

在这里我们可以看到使用包管理器这里有告诉我们如何安装Element-ui组件库，当然我们也可以直接通过浏览器的HTML标签直接导入ELement-ui了

这里我推荐使用包管理器的方式来使用Element-ui

在安装之前我们也要考虑一下浏览器版本的兼容性，因为Vue 3不再支持IE11，ELement Puls也不再支持IE浏览器， 指南中也有提示我们支持的浏览器的版本

看完使用包管理器之后，我们回到Vscode,找到我们的项目文件，在终端打开该项目文件然后输入

下载完成之后，我们可以看到在我们package.json文件依赖部分

就有了Element-ui的依赖。（我这里是使用了命令行创建了一个Vue项目,在命令行中，询问我们是否需要Router部分，我选择了是） 那么安装好之后，我们就正式开始快速搭建一个登录界面。

在这之前，我们需要进行一些配置，在main.js文件中，我们需要导入element-plus，以及使用ElementPlus

import { createApp } from 'vue'

import './assets/reset.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'

const app = createApp(App)


app.use(router)
app.use(ElementPlus)
app.mount('#app')

把一些必需品导入，在script部分我们导入

import {reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

就好了，reactive是把引用类型变成响应式数据，EleMessage是Element-ui组件库中一个消息提示用法

我们创建一个Login.vue的vue文件.让我们想想，一个登录页面需要什么，一个账号输入框，一个密码输入框，一个登录按钮，一个注册按钮，四个部分就可以实现一个简单的登录页面对吧。这四个部分其实都很简单，但是我就是不想自己手写，我们就去Element-ui组件库中找。

这是输入框的基础版本，密码框的话也有

我们又如何拿到它们的代码呢，在这些样式最底层的最右边有一个<>这样的符号

点开我们就可以看到它们的源码了。

而我们只需要复制

这一句代码就好了 同样的获取按钮，我们就去找按钮组件就好了

我们可以从其源码中，任选喜欢的按钮就好了。

<template>
    <div class="login">

        <div class="login-wrap">
            <h2>旅梦后台管理系统</h2>
            <el-row>
                <el-input v-model="state.account" placeholder="请输入账号" />
            </el-row>
            <el-row>
                <el-input v-model="state.password" placeholder="请输入密码" />
            </el-row>

            <el-row>
                <el-button type="primary" @click="signIn">登录</el-button>
                <el-button>注册</el-button>
            </el-row>
        </div>

    </div>
</template>

其中"el-row"是指这一整行的布局

    <el-row>
         <el-input v-model="state.account" placeholder="请输入账号" />
     </el-row>

对于前面说到的ElMessage是ELement-ui中常用于用户主动操作后，程序给予的反馈

登录成功我们看这一部分就好了

；

下面是源码奉上：

<template>
    <div class="login">

        <div class="login-wrap">
            <h2>旅梦后台管理系统</h2>
            <el-row>
                <el-input v-model="state.account" placeholder="请输入账号" />
            </el-row>
            <el-row>
                <el-input v-model="state.password" placeholder="请输入密码" />
            </el-row>

            <el-row>
                <el-button type="primary" @click="signIn">登录</el-button>
                <el-button>注册</el-button>
            </el-row>
        </div>

    </div>
</template>

<script setup>
import {reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
const  state = reactive({
    account:'admin',
    password:'123'
})
const router = useRouter()
const signIn=()=>{
    if(state.account && state.password){
        ElMessage({
        message: '登录成功',
        type: 'success',
            })
        router.push('/home')
    }
}
</script>

<style lang="css" scoped>
.login{
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-wrap{
    width:400px;
    background-color: #eee;
    text-align:center;
    padding:20px;
    box-sizing: border-box;
    opacity: 0.6;
    border-radius:20px;
}
h2{
    line-height:3;
    font-size:20px;
}
.el-row{
    width:80%;
    margin:0 auto;
    margin-bottom:30px;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
}
.el-button{
    width:40%;
    border-radius:15px;
}
</style>