vue入門003~vue項(xiàng)目引入element并創(chuàng)建一個(gè)登錄頁(yè)面
上一節(jié)已經(jīng)教大家如何創(chuàng)建一個(gè)vue項(xiàng)目，這一節(jié)，我們就溫故下vue項(xiàng)目的創(chuàng)建，順便引入element，實(shí)現(xiàn)一個(gè)簡(jiǎn)答的登陸頁(yè)面。
老規(guī)矩，先看效果圖
一，快速創(chuàng)建vue項(xiàng)目
二，引入element類庫(kù)
首先我們進(jìn)入element官網(wǎng)：https://element.eleme.cn/#/zh-CN/component/installation簡(jiǎn)單熟悉下element。然后如下圖所示引入element類庫(kù)。
做完上面的操作后，不要忘記安裝依賴。
三，在main.js里引入使用
如下圖紅色框里所示
四，改造HelloWorld組件如下圖
下面我把HelloWorld.Vue的完整代碼貼出來給大家
<template>
? ? <div>
? ? ? ? <el-form :rules="rules" :model="loginForm" class="loginRoot">
? ? ? ? ? ? <h3 class="loginTitle">系統(tǒng)登陸</h3>
? ? ? ? ? ? <el-form-item prop="username">
? ? ? ? ? ? ? ? <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="請(qǐng)輸入用戶名"/>
? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? <el-form-item prop="password">
? ? ? ? ? ? ? ? <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="請(qǐng)輸入密碼"/>
? ? ? ? ? ? </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: '請(qǐng)輸入用戶名', trigger: 'blur'}],
? ? ? ? ? ? ? ? ? ? password:
? ? ? ? ? ? ? ? ? ? ? ? [{required: true, message: '請(qǐng)輸入密碼', 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>
五，運(yùn)行項(xiàng)目查看效果
運(yùn)行效果如下
到這里就完整的使用vue+element實(shí)現(xiàn)了登陸頁(yè)的ui樣式了。 后面我還會(huì)系統(tǒng)的更新更多vue入門相關(guān)的文章，還會(huì)錄制對(duì)應(yīng)的視頻出來，敬請(qǐng)關(guān)注。
