鍓嶈█2020骞寸殑鏈€鍚庝竴澶╋紝鎴戝皢鍏徃鐨勪竴涓皬椤圭洰鍗囩骇鍒颁簡vue3銆傞」鐩緢绠€鍗曪紝鏍稿績鍔熻兘鏄竴涓狧5鎷煎浘锛堝唴閮ㄩ」鐩紝涓嶆柟渚跨粰閾炬帴锛夊師椤圭洰鏋舵瀯锛歷ue2+vue-cli2+vant鍗囩骇椤圭洰鏋舵瀯锛歷ue3+vite1.0+vant閲嶆瀯涓€浣撲笂绾垮ぉ锛屽厓鏃︽湡闂翠竴鍒囨甯葛煒樹笅闈㈣璁篤ue3鍜寁ite1.0鍗囩骇鍒?.0鍏冩棪vite鍗囩骇鍒?.0鐨勬椂鍊欙紝灏ら洦鐔欑粰鎴戜滑閫佷簡涓€浠藉勾澶滅ぜ鐗╋紝鍙戝竷浜?.0鐗堟湰褰撶劧锛屾槸涓嶆槸寰堥渿鎾硷紒1.0鐗堟湰杩樻病鍑烘潵锛?.0鐗堟湰浼氬嚭鍚楋紵涓嶈鎯婃厡锛屽湪鎴戠湅鏉ワ紝2.0鏈€閲嶈鐨勬洿鏂扮偣鏄痸ite鍜寁ue鐨勮В鑰︼紝vite鐨勫畼缃戞枃妗ｅ彂甯冧簡銆傝櫧鐒舵槸鑻辨枃鐨勶紝浣嗘槸鑰愬績鐪嬪畬锛岃繕鏄兘寰堝ソ鐞嗚В鐨勩€傛垜鍦ㄤ娇鐢╲ite涓亣鍒扮殑妲界偣寰堝浜哄叾瀹炲苟娌℃湁浣跨敤vite杩涜姝ｅ紡鐨勯」鐩紑鍙戯紝鍙槸鐢╲ite鏉ヨ窇vue3鐨刣emo銆傚洜涓虹幇鍦ㄥ熀浜巜ebpack鐨勮剼鎵嬫灦绋冲畾濂界敤銆倂ite鐨勪紭鍔夸笉瑷€鑰屽柣銆傛垜涓汉璁や负鏈潵寰堟湁鍙兘鍙栦唬webpack銆倂ite鍦ㄦ寮忛」鐩紑鍙戜腑琛ㄧ幇濡備綍锛熶笅闈㈠氨鎴戝湪vite浣跨敤涓亣鍒扮殑妲界偣锛屽拰澶у鍒嗕韩涓€涓媣ite鐜伴樁娈典娇鐢ㄤ腑鐨勪竴浜涗笉鐖斤紝濡傛湁閿欒锛屾杩庡ぇ瀹剁暀瑷€銆備娇鐢╲ue-cli鏃朵笉鑳戒娇鐢╮equire锛屼笟鍔￠渶瑕佹垜浠彲鑳介渶瑕佸紩鐢ㄥ浘鐗囷紝鍍忚繖鏍穥imgUrl:require("../assets/images/bg.png")}澶嶅埗浠ｇ爜锛屽湪妯℃澘涓娇鐢?img:src="imgUrl"alt="">澶嶅埗浠ｇ爜鍥剧墖璺緞鏄姩鎬佺殑锛屾垜浠繕闇€瑕佷娇鐢╮equirereference锛岃妗嗘灦鍦ㄦ墦鍖呯殑鏃跺€欏垎鏋愬嚭姝ｇ‘鐨勮矾寰勶紝浣嗘槸杩欎釜鍥剧墖寮曠敤鏂规涓嶈兘鐢ㄥ湪vite鏄殑锛屾祻瑙堝櫒浼氭姤require鐩稿叧鐨勯敊璇€傝繖绉嶆姤閿欒嚜鐒舵棤鍙帤闈烇紝鍥犱负vite鏄娇鐢ㄦ祻瑙堝櫒鑷甫鐨勬ā鍧楁潵瑙ｆ瀽js鐨勶紝require璇硶鏄痭ode璇硶锛岃嚜鐒舵姤閿欙紝浣嗘槸vite骞舵病鏈夌粰鍑哄悎鐞嗙殑s瑙ｅ喅鏂规銆傛渶鍚庡彧濂芥妸闇€瑕佸鍏ョ殑鍥剧墖鏀惧埌public鏂囦欢澶桂煒燂紝杩欐牱鎵撳寘鍓嶅悗灏变笉鐢ㄥ啀澶勭悊璺緞浜嗭紝鍙互淇濊瘉璺緞鐨勬纭€с€傚湪vue-cli涓棤娉曢厤缃叏灞€鐨刢ss鏂囦欢锛屾垜浠彲浠ヤ娇鐢╟ss棰勫鐞嗗櫒灏嗗父鐢ㄧ殑css鍙橀噺鍜宑ss鍑芥暟鎻愬彇鍑烘潵鏀惧湪涓€涓枃浠朵腑锛岀劧鍚庡湪vue.config.js涓厤缃甿odule.exports={css:{濡備笅銆俵oaderOptions:{sass:{prependData:`@import'@/assets/scss/variables.scss';`}}}}澶嶅埗浠ｇ爜锛岃繖鏍锋垜浠氨鍙互鍦ㄤ换浣晄ass鏂囦欢涓娇鐢╯ass鍙橀噺锛屼絾鏄湪vite涓紝杩欐牱鐨勯厤缃病鏈夋彁渚涴煓勶紝瀹樻柟涔熸彁渚涗簡濡備綍閰嶇疆css鍙橀噺exportdefault{css:{preprocessorOptions:{scss:{additionalData:`$injectedColor:orange;`}}}}澶嶅埗浠ｇ爜浣嗘槸锛屽鏋滄垜鎯虫斁all灏嗗彉閲忓拰鍑芥暟鎻愬彇鍒版枃浠朵腑骞跺鍏ュ畠浠紝濡備笅鎵€绀猴細//invalid}}}}澶嶅埗浠ｇ爜鍙戠幇涓嶈銆傚幓vite鐨刬ssues锛屽彂鐜颁篃鏈変汉鎻愬埌浜嗙被浼肩殑闂銆傛父鐜夌幒鐨勫洖绛斾篃寰堢畝鍗曘€傛剰鎬濇槸鐢╬octss-import閰嶇疆鍏ㄥ眬css锛屼絾鏄病璇存€庝箞閰嶇疆銆傦紙鏈夎璇嗙殑澶т浆鍙互鍦ㄤ笅鏂硅瘎璁猴級閿欒鎻愮ず涓嶅弸濂姐€備笌vue-cli鐩告瘮锛寁ite鐨勯敊璇彁绀轰笉鏄緢鍙嬪ソ銆傛湁鏃堕〉闈笉鎶ュ憡閿欒鎴栨樉绀轰换浣曞唴瀹广€傞亣鍒拌繖绉嶆儏鍐碉紝鎴戜滑鍙互灏濊瘯閲嶅惎妗嗘灦锛屽苟涓斿湪寮曠敤.vue鏂囦欢鏃讹紝涓嶈兘鐪佺暐鍚庣紑銆傛帹鑽愪娇鐢╲itevite鏈韩锛屽凡缁忚冻澶熷畬缇庝簡銆傚彲鑳藉湪宸ョ▼鍜岀ぞ鍖哄缓璁剧殑鏌愪簺鏂归潰涓嶅webpack锛屼絾鏄暣浣撲綋楠屼箣鍚庯紝寰堝鍦版柟閮藉彲浠ユ棤缂濊縼绉汇€傞€熷害纭疄姣攚ebpack蹇紝鎵撳寘涔熸瘮webpack蹇€倃ebpack灏忥紝涓嬮潰鏄悓鏍蜂唬鐮佹墦鍑烘潵鐨勫寘澶у皬瀵规瘮锛氬vue3鐨勭湅娉晇ue3鐨勫唴閮ㄤ紭鍖栧氨涓嶈浜嗐€傝璇村紑鍙戠粡楠屽惂銆傚彲浠ユ劅瑙夊埌浠ｇ爜閲忕殑澧炲姞銆備娇鐢╲ue3鏃讹紝涓€鍒囬兘鍙樻垚浜嗗嚱鏁帮紝浣跨敤vuex鍜寁ue-router鏈夊緢澶х殑鍖哄埆import{useRoute,useRouter}from"vue-router";浠庘€渧uex鈥濆鍏useStore}锛沞xportdefault{setup(){constroute=useRoute();const璺敱鍣?useRouter();conststore=useStore();}澶嶅埗浠ｇ爜鏃犲舰涓鍔犱簡浠ｇ爜閲忥紝浠ｇ爜鍙樺緱鏇寸伒娲籿ue3鏈€澶х殑鏇存柊鏄痗omposition-api锛屼竴绉嶆柊鐨勮娉曞拰浠ｇ爜缁撴瀯锛屼粠api鍋氫粈涔堟潵鐪嬶紝纭疄鏄鍔犱簡浠ｇ爜鐨勭伒娲绘€э紝浠ュ強鈥嬧€嬩唬鐮佺殑缁勭粐鎬х‘瀹炲彉寰楅珮浜嗗緢澶氥€備絾鏄紝鍦ㄥ疄闄呭紑鍙戜腑锛屾垜浠緢鍙兘涓嶅皬蹇冨湪setup涓啓浜嗗緢澶氫唬鐮侊紝浣犱篃鍙兘浼氶亣鍒颁互涓嬪満鏅細鍚屼簨灏忓紶锛氫綘鍙互鎶婁唬鐮佹彁鍙栧嚭鏉ユ斁鍦ㄤ笉鍚岀殑鏂囦欢澶逛腑锛屾柟渚跨淮鎶わ紒鎴戯細浣犳媺鍑烘潵锛屼細澶氬嚭鍑犱釜js鏂囦欢锛屾垜缁存姢涓嶅ソ锛佸悓浜嬪皬寮狅細浣犳噦浠€涔堬紝鎴戠湅浣犲氨鏄噿锛佹垜锛氭槸鍟婏紝鏃堕棿绱э紝浠诲姟閲嶏紝鍝湁鏃堕棿缁勭粐锛佹妱浠ｇ爜鍙兘璇寸悊鎯冲拰鐜板疄鎬绘湁宸窛锛屼竴鍒囬兘鏄弻鍒冨墤锛屼綘鎬庝箞鐪嬶紵浣滆€咃細鍒樻檽鎱?/p>
