上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。
老规矩,先看效果图
![e4cc1425d5f48047cf6dcef41fb3b6e1.png](https://img-blog.csdnimg.cn/img_convert/e4cc1425d5f48047cf6dcef41fb3b6e1.png)
一,快速创建vue项目
![cd4b27a3ad8c5ef38d5f12989fb42d71.png](https://img-blog.csdnimg.cn/img_convert/cd4b27a3ad8c5ef38d5f12989fb42d71.png)
二,引入element类库
首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation 简单熟悉下element。然后如下图所示引入element类库。
![0bc471844ac33dfc939a786574f85bf2.png](https://img-blog.csdnimg.cn/img_convert/0bc471844ac33dfc939a786574f85bf2.png)
做完上面的操作后,不要忘记安装依赖。
![f88e6767d38587564219d781ee4e68fa.png](https://img-blog.csdnimg.cn/img_convert/f88e6767d38587564219d781ee4e68fa.png)
三,在main.js里引入使用
如下图红色框里所示
![d93b03704770127f705a6a4f512b7d28.png](https://img-blog.csdnimg.cn/img_convert/d93b03704770127f705a6a4f512b7d28.png)
四,改造HelloWorld组件如下图
![431ad0df5e2dee1e2909ab8dca9016c7.png](https://img-blog.csdnimg.cn/img_convert/431ad0df5e2dee1e2909ab8dca9016c7.png)
下面我把HelloWorld.Vue的完整代码贴出来给大家
系统登陆
登陆
五,运行项目查看效果
![9c2ff8c9b05a766a7c88111598008459.png](https://img-blog.csdnimg.cn/img_convert/9c2ff8c9b05a766a7c88111598008459.png)
![e74b868239178601386202e09aeef82a.png](https://img-blog.csdnimg.cn/img_convert/e74b868239178601386202e09aeef82a.png)
运行效果如下
![215a26f6e3a3654ae8ca5389e7225828.png](https://img-blog.csdnimg.cn/img_convert/215a26f6e3a3654ae8ca5389e7225828.png)
到这里就完整的使用vue+element实现了登陆页的ui样式了。 后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。