vue入門003~vue項目引入element並建立一個登陸頁面

上一節已經教你們如何建立一個vue項目，這一節，咱們就溫故下vue項目的建立，順便引入element，實現一個簡答的登錄頁面。

老規矩，先看效果圖

一，快速建立vue項目

二，引入element類庫

首先咱們進入element官網：https://element.eleme.cn/#/zh-CN/component/installation
簡單熟悉下element。而後以下圖所示引入element類庫。

作完上面的操做後，不要忘記安裝依賴。

三，在main.js裏引入使用

以下圖紅色框裏所示

四，改造HelloWorld組件以下圖

下面我把HelloWorld.Vue的完整代碼貼出來給你們

<template>
    <div>
        <el-form :rules="rules" :model="loginForm" class="loginRoot">
            <h3 class="loginTitle">系統登錄</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="請輸入用戶名"/>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="請輸入密碼"/>
            </el-form-item>
            <el-button type="primary" style="width: 100%">登錄</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123'
                },
                rules: {
                    username: [{required: true, message: '請輸入用戶名', trigger: 'blur'}],
                    password:
                        [{required: true, message: '請輸入密碼', trigger: 'blur'}],
                },
            }
        }
    }
</script>

<style>
    .loginRoot {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 50px auto;
        width: 350px;
        padding: 15px 35px;
        background: aliceblue;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #c6c6c6;
    }
    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505050;
    }
</style>

五，運行項目查看效果

運行效果以下

到這裏就完整的使用vue+element實現了登錄頁的ui樣式了。
後面我還會系統的更新更多vue入門相關的文章，還會錄製對應的視頻出來，敬請關注。