asp.net 安装element ui_vue入门003~vue项目引入element并创建一个登录页面

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

老规矩,先看效果图

2e9ecc9dbfb8b569ba2e91dcbd694aa9.png

一,快速创建vue项目

26ddeff6d3ef86491634751542022650.png

二,引入element类库

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

f0193e52d070a16d4a6fdf0fb9f31879.png

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

27722f6b1a63741789aff92301ef7114.png

三,在main.js里引入使用

如下图红色框里所示

fad6c19805282a3041e206e1463de050.png

四,改造HelloWorld组件如下图

4b8b85d2c5c34802348fbcd17c1dcd0e.png

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

系统登陆

登陆

五,运行项目查看效果

0cd940a8fbbe1dc31e75a82f580c36e2.png
70ef7528b7fe4b912e89c17a47e4715e.png

运行效果如下

f315ab93634a2a067bf9bdf99339439f.png

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值