栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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的完整代码贴出来给大家






    .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;
    }

五,运行项目查看效果



运行效果如下

到这里就完整的使用vue+element实现了登陆页的ui样式了。
后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/239982.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号