您好,欢迎来到海洋目录网!网站收录,值得选择!长期招友情链接 QQ10212321

快审
当前位置:海洋目录网 » 站长资讯 » 站长资讯 » 文章详细 订阅RssFeed

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

来源:本站原创 浏览:17次 时间: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入门相关的文章,还会录制对应的视频出来,敬请关注。

推荐站点

  • At-lib分类目录At-lib分类目录

    At-lib网站分类目录汇集全国所有高质量网站,是中国权威的中文网站分类目录,给站长提供免费网址目录提交收录和推荐最新最全的优秀网站大全是名站导航之家

    www.at-lib.cn
  • DMOZ目录DMOZ目录

    DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

    www.dmozdir.cn
  • 中国链接目录中国链接目录

    中国链接目录简称链接目录,是收录优秀网站和淘宝网店的网站分类目录,为您提供优质的网址导航服务,也是网店进行收录推广,站长免费推广网站、加快百度收录、增加友情链接和网站外链的平台。

    www.cnlink.org
  • 35目录网35目录网

    35目录免费收录各类优秀网站,全力打造互动式网站目录,提供网站分类目录检索,关键字搜索功能。欢迎您向35目录推荐、提交优秀网站。

    www.35mulu.com
  • Adcd网站目录Adcd网站目录

    Adcd网站目录是全免费的网址提交目录,收录国内外、各行业优秀网站,为用户提供全面的网站分类目录网站、优秀网站参考、友情链接交换平台、网站推广服务国内免费的网站提交入口(www.adcd.cn)。

    https://www.adcd.cn