vue 入门_零基础入门vue开发,elementui的使用

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

老规矩,先看效果图

e4cc1425d5f48047cf6dcef41fb3b6e1.png

一,快速创建vue项目

cd4b27a3ad8c5ef38d5f12989fb42d71.png

二,引入element类库

首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation 简单熟悉下element。然后如下图所示引入element类库。

0bc471844ac33dfc939a786574f85bf2.png

做完上面的操作后,不要忘记安装依赖。

f88e6767d38587564219d781ee4e68fa.png

三,在main.js里引入使用

如下图红色框里所示

d93b03704770127f705a6a4f512b7d28.png

四,改造HelloWorld组件如下图

431ad0df5e2dee1e2909ab8dca9016c7.png

下面我把HelloWorld.Vue的完整代码贴出来给大家

系统登陆

登陆

五,运行项目查看效果

9c2ff8c9b05a766a7c88111598008459.png
e74b868239178601386202e09aeef82a.png

运行效果如下

215a26f6e3a3654ae8ca5389e7225828.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值