vue 登录成功后跳转页面_vue入门003~vue项目引入element并创建一个登录页面

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

老规矩,先看效果图

2e15a1bdf27252f402d57a5ceced19b2.png

一,快速创建vue项目

9ce670dccdc989ebbd9734f4e17f8f81.png

二,引入element类库

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

4861082c3ee7b3b70ad8268112b00088.png

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

d54661a5fd7cce4b02e19eaac2a02193.png

三,在main.js里引入使用

如下图红色框里所示

3a19522fca26f9e86afd590477bcffeb.png

四,改造HelloWorld组件如下图

28dc00ac4ab6c62ebf9d6041ad882589.png

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

系统登陆

登陆

五,运行项目查看效果

30f4e7f592433394712e5f9697daa894.png
93dcdf0a476bdf385397b43dc21b6499.png

运行效果如下

1233d30831329f30b205c65a60c5bbd5.png

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值