vue实现登录功能

.loginbBody{瀹藉害锛?00%锛涢珮搴︼細100%锛涜儗鏅壊锛?B3C0D1锛泒.loginDiv{浣嶇疆锛氱粷瀵?椤堕儴锛?0%锛涘乏锛?0%锛涜竟璺濋《閮細-200px锛涘乏杈硅窛锛?250px锛涘搴︼細450px锛涢珮搴︼細330px锛涜儗鏅細#fff锛涜竟鐣屽崐寰勶細5%锛泏杈硅窛锛?0px0;鏂囨湰瀵归綈锛氬眳涓紱}.login-content{瀹藉害锛?00px锛涢珮搴︼細250px锛涗綅缃細缁濆锛涢《閮細25px锛涘乏锛?5px锛泒鍘熸枃閾炬帴浠ｇ爜鍦板潃锛歨ttps://github.com/Snowstorm0...1鍒涘缓椤圭洰锛屾墦寮€cmd锛岃緭鍏i鍛戒护锛氬鏋渧ueui娌℃湁鍙嶅簲锛岀増鏈彲鑳芥槸澶猯ow浜嗭紝闇€瑕佸嵏杞介噸鍚畨瑁咃細npmuninstallvue-cli-g#鍗歌浇npminstall@vue/cli-g#瀹夎鎵цui鍛戒护鎴愬姛鍚庝細鍑虹幇鎻愮ず锛氿煔€StartingGUI...馃尃Readyonhttp://localhost:8000浼氳嚜鍔ㄦ墦寮€椤甸潰锛氬垱寤轰竴涓悕涓篠pringAndVue-vue鐨勯」鐩紝榛樿閫夋嫨鈥淢anual鈥濓紱鍚敤Babel銆丷outer銆乂uex銆丩inter/Formatter锛涢€夋嫨鈥淓SLintwitherrorpreventiononly鈥濊繘琛岄厤缃紱鐗堟湰鎺ㄨ崘鈥渧ue2.0鈥濄€傚垱寤轰竴涓柊椤圭洰銆傞€氳繃cd杩涘叆鐩綍锛屽惎鍔ㄩ」鐩細npmrunserve2installplug-in2.1element-ui鎵撳紑cmd锛岃緭鍏i鍛戒护锛歷ueui鍦ㄦ彃浠堕」鎼滅储锛岀偣鍑诲畨瑁呫€俈ue2.0閫夋嫨瀹夎鈥渧ue-cli-plugin-element鈥濓紱vue3.0閫夋嫨瀹夎鈥渧ue-cli-plugin-element-plus鈥濄€?.2axiosTerminal瀹夎axios锛屾瘡涓柊寤洪」鐩渶瑕佸畨瑁咃細#vue-cli2.0鍛戒护npminstallaxios#vue-cli3.0鍛戒护npmaddaxios2.3mockjsTerminal瀹夎mockjsnpminstallmockjs3娣诲姞鍔熻兘3.1鐧诲綍鍒涘缓login.vue椤甸潰:.loginbBody{瀹藉害锛?00%锛涢珮搴︼細100%锛涜儗鏅壊锛?B3C0D1锛泒.loginDiv{浣嶇疆锛氱粷瀵?椤堕儴锛?0%锛涘乏锛?0%锛涜竟璺濋《閮細-200px锛涘乏杈硅窛锛?250px锛涘搴︼細450px锛涢珮搴︼細330px锛涜儗鏅細#fff锛涜竟鐣屽崐寰勶細5%锛泏杈硅窛锛?0px0;鏂囨湰瀵归綈锛氬眳涓紱}.login-content{瀹藉害锛?00px锛涢珮搴︼細250px锛涗綅缃細缁濆锛涢《閮細25px锛涘乏锛?5px锛泒3.2閰嶇疆璺敱鍦╮outer.js涓厤缃竴绾ц矾鐢?{path:'/login',name:'login',component:()=>import(/*webpackChunkName:"user"*/'../views/login.vue')}3.3mockjs妯℃嫙鍚庡彴鍦ㄦ病鏈夊悗绔唬鐮佺殑鎯呭喌涓嬶紝鍙互浣跨敤mockjs妯℃嫙鍚庡彴鏁版嵁鎴戜滑浣跨敤mockjs妯℃嫙鍚庡彴鐧诲綍楠岃瘉锛屽苟杩斿洖token銆傛垜浠缃殑鐧诲綍鐢ㄦ埛鍚嶅拰瀵嗙爜閮芥槸admin銆傚湪src涓嬫柊寤簃ock鏂囦欢澶癸紝鍦╩ock鏂囦欢澶逛笅鏂板缓mock.js锛屽唴瀹瑰涓嬶細//寮曞叆npm瀹夎鐨刴ockjsconstMock=require('mockjs')//鑾峰彇mock.Random瀵硅薄constRandom=Mock.Random;//Login锛岃繖涓湴鍧€瀵瑰簲login鐧诲綍鍦板潃Mock.mock('/login','post',(param)=>{letstate=0;letbody=JSON.parse(param.body);console.log(body)letdata;//妯℃嫙鐢ㄦ埛鍚嶅拰瀵嗙爜閮芥槸adminif(body.name=='admin'&&body.password=='admin'){state=1;data=Mock.mock({"token":"@guid()",//妯℃嫙token"name":"@cname",//闅忔満鐢熸垚涓枃鍚峿);}return{"state":state,"vData":data}});//閫€鍑篗ock.mock('/logout','post',()=>{return{state:1}});3.4storejs鍦╯rc/store/index.js涓坊鍔燰uex.Store灞炴€э細exportdefaultnewVuex銆傚瓨鍌紙{state:{token:'',username:'codepath'},getters:{},mutations:{SET_TOKEN(state,token){state.token=token;localStorage.setItem("token",t濂界殑锛夛紱},resetState(state){state.token='';localStorage.clear();}},actions:{},modules:{}})4鍔熻兘瀹炵幇鍦ㄦ祻瑙堝櫒涓緭鍏ュ湴鍧€锛歨ttp://localhost:8080/#/login鍙互鏄剧ず鐧诲綍鐣岄潰锛氳緭鍏ョ敤鎴峰悕鍜屽瘑鐮乤dmin锛屼綘鍙互杩涘叆棣栭〉锛氱偣鍑诲ご鍍忔樉绀洪€€鍑烘寜閽紝鍙互杩斿洖鐧诲綍鐣岄潰锛氬涔犳洿澶氱紪绋嬬煡璇嗭紝璇峰叧娉ㄦ垜鐨勫叕浼楀彿锛歝odetheway