3

element ui框架（登录窗口）

 2 years ago
source link: https://feixiaoxing.blog.csdn.net/article/details/126915737
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

element ui框架（登录窗口）

嵌入式-老费 已于 2022-09-18 14:47:36 修改 33

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        前面说到了路由，有了这个功能，其实后面的工作就比较好开展了。一般来说，很多网页项目都是这样的，首先进入的是登录窗口，在输入用户名和密码之后，就可以进入主页面了。所以，登陆页面本身也是非常重要的一个环节。

1、创建登录工程，注意选中router功能

vue init ./webpack login

2、安装element ui

3、安装其他node_modules，并执行

4、将element ui添加到项目中




newCodeMoreWhite.png
 

5、删除原来HelloWorld相关的功能
 

5.1 删除App.vue中图片的内容、删除样式
 




newCodeMoreWhite.png
 

5.2 删除HelloWorld.vue中显示的内容，仅保留一个基本框架
 
 

6、创建view目录
 

6.1 添加Login.vue
 




newCodeMoreWhite.png
 

6.2 添加Main.vue，其实和Login.vue差不多
 




newCodeMoreWhite.png
 

6.3 修改router/index.js，将Login和Main插入到路由表中
 




newCodeMoreWhite.png
 

6.4 输入127.0.0.1:8082/#/Login和127.0.0.1:8082/#/Main来进行验证。
 

7、准备利用element ui组件来修饰Login.vue
 

7.1 因为编写的过程中涉及到style的编写，所以需要安装node-sass、sass-loader
 
 

7.2 修改Login.vue
 




newCodeMoreWhite.png
 

8、测试网页
 

        有了上面这些操作，在npm run dev运行后，就可以看到不错的登录框效果了，
 

3bd9de5492c54aecb73511b6db84ea58.png
 


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK