基于Nuxt.js+Vue聊天实例-nuxt仿微信-探探聊天界面
1.椤圭洰浠嬬粛Nuxt.js鏄洰鍓嶆祦琛岀殑鏈嶅姟绔覆鏌揝SR妗嗘灦銆傚嚟鍊熷叾鏇村ソ鐨凷EO銆佹洿蹇殑鍐呭鍒拌揪鏃堕棿锛?棣栧睆娓叉煋閫熷害*锛変互鍙婂熀浜嶸ue.js鎶€鏈紑鍙戯紝鏇存槗浜庝娇鐢紝璧㈠緱浜嗕紬澶氭妧鏈紑鍙戣€呯殑闈掔潗銆俷uxt_chatroom椤圭洰鏄熀浜巒uxt+vue+vuex+vant绛夋妧鏈紑鍙戠殑绫诲井淇inder鐣岄潰鑱婂ぉ瀹炰緥銆傚疄鐜颁簡缈诲崱鐗囥€佹秷鎭彂閫?琛ㄦ儏gif銆佸浘鐗?瑙嗛棰勮銆佺孩鍖?鏈嬪弸鍦堢瓑鍔熻兘銆傛晥鏋滅墖娈祎sktsk锛屾晥鏋滆繕涓嶉敊锛屼笅闈㈣璇村疄鐜拌繃绋嬨€?銆佹妧鏈鏋朵娇鐢ㄦ妧鏈細nuxt.js+vue.js+vuexUI缁勪欢搴擄細vant-ui锛堟湁璧炵Щ鍔╲ue.js缁勪欢搴擄級瀛椾綋鍥炬爣锛氶樋閲宨confont鍥炬爣搴撳脊绐楃粍浠讹細vpopup锛堝熀浜巚ue瀹氬埗寮规锛塴ocalstorage:cookie-universal-nuxt:^2.1.4瀵筃uxt.js涓嶇啛鎮夌殑鍙互鍏堝幓瀹樼綉鐪嬬湅璧勬枡銆傚叾瀹炲彧瑕佷細Vue锛屼笂鎵嬪氨寰堢畝鍗曘€俬ttps://zh.nuxtjs.org/https://github.com/nuxt/nuxt.js涓夈€侀」鐩洰褰曠粨鏋勫鏋滄兂浜嗚В鏇村鍏充簬Nuxt.js鐨勭洰褰曠粨鏋勫拰浣跨敤璇存槑锛屽彲浠ュ弬鑰冮摼鎺ヤ互涓嬨€俬ttps://zh.nuxtjs.org/guide/d...4銆佸叧浜庤嚜瀹氫箟缁勪欢椤圭洰涓殑topNavbar銆乀abbar銆佸脊绐楅兘鏄嚜瀹氫箟缁勪欢瀹炵幇鐨勩€傛垜涓嶄細鍦ㄨ繖閲岃В閲婂お澶氥€傛湁鍏磋叮鐨勫彲浠ュ幓鐪嬬湅涓嬮潰鐨勫垎浜枃绔犮€侼uxt/Vue浠垮捀楸糡abbar鍑歌捣鏁堟灉|vue鑷畾涔夊鑸爮vue鑷畾涔夊脊鍑烘缁勪欢|浠縜ndroid/ios寮圭獥鏁堟灉5銆佷豢Tinder|鎺㈡帰鍗＄墖缈婚〉閬亣椤靛師鍨嬪弬鑰冪ぞ浜ゅ簲鐢ㄦ帰鎺㈠崱鐗囨粦鍔ㄦ晥鏋溿€傛暣浣撳垎涓洪《閮ㄥ鑸€佹粦鍔ㄥ尯鍩熴€佸簳閮ㄦ爣绛炬爮涓夐儴鍒嗐€傝繖閲屽氨涓嶅鍋氫粙缁嶄簡锛屾湁鍏磋叮鐨勫彲浠ョ湅涓嬮潰鐨勫垎浜枃绔犮€倂ue|Nuxt.js浠垮崱鐗囧紡宸﹀彸鎷栧姩|vue浠縏inder6,nuxt榛樿甯冨眬鍦╪uxt椤圭洰涓紝layouts鐩綍涓嬬殑default.vue椤甸潰涓洪粯璁ゅ竷灞€椤甸潰銆?!--甯冨眬妯℃澘-->
娉ㄦ剰锛?nuxt/>鐢ㄤ簬鏄剧ずnuxt椤圭洰涓殑涓昏鍐呭锛岃€?router-view/>鐢ㄤ簬vue銆俷uxt.config.js閰嶇疆鏂囦欢鏄痭uxt.js鐨勯粯璁ら厤缃枃浠讹紝鍙互閰嶇疆meta銆佽矾鐢变俊鎭€乧ss/js鍜屾彃浠跺紩鍏ャ€亀ebpack绛夐厤缃€俬ttps://zh.nuxtjs.org/guide/configuration/exportdefault{//绔彛閰嶇疆锛堝彲閫夛級server:{port:3000,host:'192.168.122.100'},/***椤甸潰澶撮儴鍏冧俊鎭厤缃?/澶达細{鏍囬锛歱rocess.env.npm_package_name||'',meta:[{charset:'utf-8'},{name:'viewport',content:'width=device-width,initial-scale=1,user-scalable=no'},{hid:'鍏抽敭瀛?锛屽悕绉帮細'鍏抽敭瀛?锛屽唴瀹癸細'Vue.js|Nuxt.js|Nuxt浠垮井淇?},{hid:'description',name:'description',content:process.env.npm_package_description||''}],閾炬帴锛歔{rel:'icon',type:'image/x-icon',href:'/favicon.ico'},{rel:'stylesheet',href:'/js/wcPop/skin/wcPop.css'},],script:[{src:'/js/fontSize.js'},{src:'/js/wcPop/wcPop.js'},]},/***鍏ㄥ眬css閰嶇疆*/css:['~/assets/css/reset.css','~/assets/css/layout.css','~/assets/fonts/iconfont.css',],/***鍏ㄥ眬鎻掍欢鍒楄〃*/plugins:['~/plugins/vue-global.js',//passthis涔熷彲浠ヨ繖鏍峰紩鍏ユ湰鍦癹s锛堥渶瑕佽缃畇sr:false锛?/{src:'~/assets/js/fontSize.js',ssr:false}],//...}innuxt.config.jsMeta鏄叏灞€閰嶇疆鐨勩€傚鏋滄槸鍗曢〉閰嶇疆锛屽弬鑰冨涓嬶細7.棣栧厛Nuxt鑱婂ぉ妯″潡鑰冭檻鑱婂ぉ鐨勭紪杈戞妯″潡浣跨敤input鎴栬€卼extarea瀹炵幇锛屼絾鏄枃鏈鍙兘鎻掑叆emoj瀛楃(:32:smile:)锛屼笉鑳芥彃鍏moj鍥剧墖琛ㄦ儏锛屼笉鏄綘鎯宠鐨勬晥鏋溿€傚涓婂浘锛氭墍浠ヤ娇鐢╠iv鐨勫彲缂栬緫鍑芥暟contenteditable鏉ユ彃鍏ュ浘褰㈠唴瀹广€?template>
缂栬緫鍣ㄧ粡杩囦竴绯诲垪澶勭悊鍚庯紝鏀寔澶氳鏂囧瓧杈撳叆銆乪moj鎻掑叆绛夊姛鑳藉厜鏍囥€傚涓嬪浘鎵€绀猴細vue.js椤圭洰涓浣曡幏鍙栦笂浼犺棰戠殑绗竴甯т綔涓哄皝闈㈠浘锛熺綉涓婂緢澶氳В鍐冲姙娉曢兘浼氳鎴浘鍑虹幇榛戝睆銆傚悗鏉ョ粡杩囧弽澶嶈皟璇曪紝缁堜簬瀹炵幇浜嗚繖涓晥鏋溿€俵etfile=this.$refs.chooseVideo.files[0]if(!file)returnletsize=Math.floor(file.size/1024)if(size>3*1024){alert('璇烽€夋嫨3MB浠ュ唴鐨勮棰?)returnfalse}//鑾峰彇瑙嗛URL)}elseif(window.webkitURL!=undefined){videoUrl=window.webkitURL.createObjectURL(file)}let$video=document.createElement('video')$video.src=videoUrl//闃叉榛戝睆鎴栭€忔槑鐧絪creen$video.play()$video.muted=true$video.addEventListener('timeupdate',()=>{if($video.currentTime>.1){$video.pause()}})//鎹曡幏瑙嗛鐨勭涓€甯т綔涓哄皝闈?canvas.height=$video.videoHeight*.8canvas.getContext('2d').drawImage($video,0,0,canvas.width,canvas.height)letvideoThumb=canvas.toDataURL('image/png')console.log(videoThumb)},16);})鏈夊叴瓒ｇ殑鍙互鑷繁璇曡瘯濡傛灉杩樻湁鍏朵粬鐨勫ソ鐨勬柟娉曪紝娆㈣繋浜ゆ祦璁ㄨ锛丱K锛屽熀浜嶯uxt.js浠垮井淇¤亰澶╁椤圭洰锛屽垎浜埌杩欓噷銆傚笇鏈涘澶у鏈夋墍甯姪锛佲湇馃挭鏈€鍚庨檮涓婁竴涓狥lutter椤圭洰瀹炰緥锛歠lutter+dart鑱婂ぉ瀹flutter浠垮井淇pp鑱婂ぉ鐣岄潰|flutter鑱婂ぉ瀹炰緥
