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