上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。
老规矩,先看效果图
![2e9ecc9dbfb8b569ba2e91dcbd694aa9.png](https://i-blog.csdnimg.cn/blog_migrate/a00ea9790131028445a663ef04b337fb.jpeg)
一,快速创建vue项目
![26ddeff6d3ef86491634751542022650.png](https://i-blog.csdnimg.cn/blog_migrate/a739fd41b1a921e5e0f641c49b7f7ef0.jpeg)
二,引入element类库
首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation 简单熟悉下element。然后如下图所示引入element类库。
![f0193e52d070a16d4a6fdf0fb9f31879.png](https://i-blog.csdnimg.cn/blog_migrate/030ba85ad4e1f1c843c0778aa4e1aa73.jpeg)
做完上面的操作后,不要忘记安装依赖。
![27722f6b1a63741789aff92301ef7114.png](https://i-blog.csdnimg.cn/blog_migrate/e048f78209779ccd9d0794948b20e56f.jpeg)
三,在main.js里引入使用
如下图红色框里所示
![fad6c19805282a3041e206e1463de050.png](https://i-blog.csdnimg.cn/blog_migrate/97389d8dbc68d2a20f8566c9e6711d80.jpeg)
四,改造HelloWorld组件如下图
![4b8b85d2c5c34802348fbcd17c1dcd0e.png](https://i-blog.csdnimg.cn/blog_migrate/c1599cd809d409e5c959d59f562afdff.jpeg)
下面我把HelloWorld.Vue的完整代码贴出来给大家
系统登陆
登陆
五,运行项目查看效果
![0cd940a8fbbe1dc31e75a82f580c36e2.png](https://i-blog.csdnimg.cn/blog_migrate/93b6631b8da08f396d91ef3a2af7d9af.jpeg)
![70ef7528b7fe4b912e89c17a47e4715e.png](https://i-blog.csdnimg.cn/blog_migrate/b8396287fdc00caa34e8ceeffd0322da.jpeg)
运行效果如下
![f315ab93634a2a067bf9bdf99339439f.png](https://i-blog.csdnimg.cn/blog_migrate/03f7e87ea511543a74bf4449950a029c.jpeg)
到这里就完整的使用vue+element实现了登陆页的ui样式了。 后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。