vue入门003~vue项目引入element并创建一个登录页面-创新互联

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

成都网站制作、网站建设、外贸网站建设的关注点不是能为您做些什么网站,而是怎么做网站,有没有做好网站,给创新互联一个展示的机会来证明自己,这并不会花费您太多时间,或许会给您带来新的灵感和惊喜。面向用户友好,注重用户体验,一切以用户为中心。

老规矩,先看效果图

vue入门003~vue项目引入element并创建一个登录页面

一,快速创建vue项目

vue入门003~vue项目引入element并创建一个登录页面

二,引入element类库

首先我们进入element官网:https://element.eleme.cn/#/zh-CN/component/installation
简单熟悉下element。然后如下图所示引入element类库。
vue入门003~vue项目引入element并创建一个登录页面
做完上面的操作后,不要忘记安装依赖。
vue入门003~vue项目引入element并创建一个登录页面

三,在main.js里引入使用

如下图红色框里所示
vue入门003~vue项目引入element并创建一个登录页面

四,改造HelloWorld组件如下图

vue入门003~vue项目引入element并创建一个登录页面

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





五,运行项目查看效果

vue入门003~vue项目引入element并创建一个登录页面
vue入门003~vue项目引入element并创建一个登录页面
运行效果如下
vue入门003~vue项目引入element并创建一个登录页面
到这里就完整的使用vue+element实现了登陆页的ui样式了。
后面我还会系统的更新更多vue入门相关的文章,还会录制对应的视频出来,敬请关注。

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享题目:vue入门003~vue项目引入element并创建一个登录页面-创新互联
浏览地址:http://myzitong.com/article/djches.html