您好,欢迎来到站长目录(28sn.com)!


vue入门003~vue项目引入element并创建一个登录页面

来源:网络整理 浏览:329次 时间:2020-07-09

上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。

老规矩,先看效果图

vue入门003~vue项目引入element并创建一个登录页面

一,快速创建vue项目

vue入门003~vue项目引入element并创建一个登录页面

二,引入element类库

首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation
简单熟悉下element。然后如下图所示引入element类库。
vue入门003~vue项目引入element并创建一个登录页面
做完上面的操作后,不要忘记安装依赖。
vue入门003~vue项目引入element并创建一个登录页面

三,在main.js里引入使用

如下图红色框里所示
vue入门003~vue项目引入element并创建一个登录页面

四,改造HelloWorld组件如下图

vue入门003~vue项目引入element并创建一个登录页面

下面我把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入门003~vue项目引入element并创建一个登录页面
vue入门003~vue项目引入element并创建一个登录页面
运行效果如下
vue入门003~vue项目引入element并创建一个登录页面
到这里就完整的使用vue+element实现了登陆页的ui样式了。
后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。

推荐站点

  • 我爱发烧音乐我爱发烧音乐

    我爱发烧音乐囊括了从流行音乐到古典音乐多个类型的音乐作品,专栏推荐最新的音乐,提供音乐排名榜单!可供免费线上收听音乐,歌曲流畅,音效极佳! 网站提供的钢琴以及二胡专栏,可供收听者,陶冶情操,改善心情,是难得的轻音乐典藏!

    www.520fs.com
  • 世纪音乐网世纪音乐网

    世纪音乐网是专业的在线音乐试听MP3下载网站。歌曲总计30余万首,收录了网上最新歌曲和流行音乐,DJ舞曲,非主流音乐,经典老歌,劲舞团歌曲,搞笑歌曲,儿童歌曲,英文歌曲等。是您上网听歌的最佳网站。

    www.ssjj.com
  • 怒江大峡谷网怒江大峡谷网

    怒江大峡谷网内容包括:新闻、要闻、怒江报、视频、文化、民俗、人文、音乐、政务、公告、政策等地方信息。

    www.nujiang.cn
  • 杭州网杭州网

      杭州网是杭州地区唯一的新闻门户网站,由中共杭州市委宣传部、杭州日报报业集团和杭州广播电视集团共同组建的杭州网络传媒有限公司运营。

    www.hangzhou.com.cn
  • 深圳在线深圳在线

      深圳在线 www.szol.net是深圳本地最大、最早的地方生活资讯网站之一,网站名“深圳在线www.szol.net”由南方报业传媒集团编辑委员会总编辑、南方日报社总编辑、南方都市报总编辑、南方书画院名誉院长王春芙亲笔题名,深圳在线www.szol.net团队与深圳热线www.szonline.net、奥一网www.oeeee.com都源于全国最早成立于1996年的知名网络公司——深圳万用网。

    www.szol.net

鄂公网安备 42062502000001号