vue-cli鑴氭墜鏋舵惌寤洪殢鐫€vue.js瓒婃潵瓒婃祦琛岋紝瓒婃潵瓒婂鐨勯」鐩娇鐢╲ue杩涜寮€鍙戙€傚湪瀹為檯寮€鍙戦」鐩腑濡備綍寮€鍙戣剼鎵嬫灦锛屼粖澶╃粰澶у鍒嗕韩涓€涓嬶紝浠ュ強鍦ㄩ」鐩腑閬囧埌鐨勪竴浜涢棶棰樺浣曡В鍐?..棣栧厛锛屼綘闇€瑕佷簡瑙ｄ互涓嬬煡璇嗭紝杩欐牱浣犳墠鑳芥洿濂界殑鐞嗚ВhtmlCSSJavascriptNode銆俲s鐜锛坣pm鍖呯鐞嗗伐鍏凤級webpack鑷姩鍖栨瀯寤哄伐鍏?銆佸畨瑁卬ode.js褰撶劧锛屽鏋滃畨瑁呬簡锛岃繖涓€姝ュ氨涓嶉渶瑕佹搷浣滀簡锛岄偅涓轰粈涔堣繕瑕佸畨瑁卬ode.js鍛紵鍥犱负vue-cli鑴氭墜鏋舵槸鍩轰簬webpack鐨勶紝鑰寃ebpack鏄熀浜巒odenode瀹樻柟涓嬭浇鐨?銆佷粠瀹樼綉瀹夎cnpm锛氥€嬭繖鏄竴涓畬鏁寸殑npmjs.org闀滃儚锛屼綘鍙互鐢ㄨ繖涓唬鏇垮畼鏂圭増鏈紙鍙)锛屽悓姝ラ鐜囩洰鍓嶄负**10**鍒嗛挓涓€娆★紝灏藉彲鑳戒繚璇佷笌瀹樻柟鍚屾銆傗€濆綋鐒惰繖涓搷浣滆鐪嬩綘鏄惁瀹夎浜哻npm娉細npm锛坣odepackagemanager锛夋槸涓€涓猲odejs鍖呯鐞嗗櫒锛岀敤浜巒ode鎻掍欢绠＄悊锛堟墦鍖呫€佸嵏杞姐€佺鐞嗕緷璧栫瓑锛夛紱浣跨敤npm瀹夎鎻掍欢锛氬懡浠ゆ彁绀烘墽琛宯pminstall锛岄€夋嫨cnpm锛屽洜涓簄pm瀹夎鎻掍欢鏄粠鍥藉鏈嶅姟鍣ㄤ笅杞界殑锛屽彈缃戠粶褰卞搷杈冨ぇ锛屽彲鑳戒細鍑虹幇寮傚父銆備簬鏄効鎰忓垎浜殑娣樺疂鍥㈤槦灏辫繖鏍峰仛浜嗭紒瀹夎cnpm:npminstall-gcnpm--registry=https://registry.npm.taobao.org鏌ョ湅鏄惁瀹夎锛屽彲浠ユ煡鐪媍npm鐨勭増鏈?cnpm-vps:yarn涔熸槸涓€涓寘绠＄悊鍣紝灏辨槸facebook鍙戝竷鐨勪竴涓浛浠pm鐨勫寘绠＄悊宸ュ叿==>yarnnpmi-gyarn鐨勫叏灞€瀹夎锛坕鏄痠nstall鐨勭缉鍐欙級涓夈€佸畨瑁卾ue-cli鑴氭墜鏋舵惌寤哄伐鍏穠ue-cli鎻愪緵浜嗕竴涓懡浠よ宸ュ叿锛屽彲浠ョ敤浜庡揩閫熸瀯寤哄ぇ鍨嬪崟椤靛簲鐢⊿PA锛圫ingle-pageApplication锛夛紝椤惧悕鎬濅箟灏辨槸鍦╓eb璁捐涓娇鐢ㄥ崟椤碉紝鍒╃敤JavaScript鎿嶄綔Dom鎶€鏈疄鐜板悇绉嶅簲鐢ㄣ€傝繖鏄幇鍦ㄧ晫闈腑闈炲父娴佽鐨勮璁°€備娇鐢ˋJAX锛屾暣浣撻〉闈㈠搷搴旈€熷害闈炲父蹇€傞厤鍚堣矾鐢辩殑Lazyloading绛夋墜娈碉紝鍙互杈惧埌Native搴旂敤鐨勪綋楠屻€傜‘璁ゆ槸鍚﹀畨瑁呬簡vue-cli锛屽鏋滄病鏈夛紝鍒欐墽琛屼互涓嬫搷浣滐細cnpmi-g@vue/cli濡傛灉鏄?.0浠ヤ笅鐨勭増鏈紝鍒欏畨瑁呮寚瀹氱増鏈琻pmi-gvue-cli@versionnumber濡傛灉鏄?.0浠ヤ笂鐨勭増鏈琻pmi-gvue/cli@versionnumber*鍥涖€佸垱寤洪」鐩鍏堝垱寤洪」鐩悕绉帮細vuecreate+鑷畾涔夋枃浠跺悕2.浠ヤ笅姝ラ鏍规嵁鑷繁椤圭洰鐨勯渶瑕侀€夋嫨3.濡傛灉鍑虹幇浠ヤ笅鏄剧ず锛屽垯琛ㄧず鎮ㄥ凡鎴愬姛瀹夎銆傛俯棣ㄦ彁绀猴細UseESLinttolintyourcode?:鈥斺€旇繖閲屽己鐑堝缓璁€夋嫨no锛屽惁鍒欎細寰堢棝鑻︺€俥slint鐨勬牸寮忔牎楠岄潪甯镐弗鏍硷紝澶氫竴鏍兼垨鑰呭皯涓€鏍奸兘浼氭姤閿欙紝鎵€浠ュ浜庢柊鎵嬫潵璇达紝涓€鑸笉寤鸿寮€鍚€備細澧炲姞寮€鍙戦毦搴?銆佸畨瑁呭畬鎴愬悗鏍规嵁鎻愮ず鎿嶄綔锛岃緭鍏dprojectname锛堜綘鐨勯」鐩悕锛夌劧鍚庤緭鍏npmrunserver鏈€鍚庡湪vue椤圭洰涓墦寮€http://127.0.0.1:8080/涓哄涓嬫墍绀烘湁闂鍚楋紵锛燂紵涓€涓墜鏈洪」鐩竴鑸垎涓哄簳閮ㄥ鑸拰璺敱灞曠ず涓ら儴鍒嗐€傚簳閮ㄥ鑸爮甯哥敤鍐欐ā鏉块儴鍒嗭紝鍏朵腑to="/a"琛ㄧず鍘诲摢涓厤缃殑璺敱缁勪欢椤甸潰锛宺outer-link鏄浉褰撶殑alink鏍囩锛屽幓鎺塧link鏍囩锛屼綘鍙渶瑕乺outer-link闇€瑕佸姞涓妕ag="span"锛屽綋鐒朵篃鍙互鏄叾浠栫殑tag銆傞偅涔堝浣曞湪瀵艰埅鏍忎腑鏄剧ず楂樹寒鍛紵activeClass="active"锛屽彲浠ュ疄鐜帮紝褰撶劧鍙互鑷繁娣诲姞鏍峰紡Discover鍟嗗煄My
2.v-for閬嶅巻html閮ㄥ垎{{item.name}}
鍦╠ata鐨刣ata閮ㄥ垎瀹氫箟涓€涓狶ist锛堟垨鑰呰幏鍙朙ist骞堕€氳繃ajax绛夊叾浠栨柟寮忎繚瀛橈級3.html閮ㄥ垎鐨勭涓夌鍐欐硶
鏁版嵁閮ㄥ垎exportdefault{data(){return{List:["../assets/img/pic.jpg","../assets/img/pic2.jpg","../assets/img/pic3.jpg","../assets/img/pic4.jpg","../assets/img/pic5.jpg",]}}}浣嗗疄闄呬笂鍙樻垚浜嗚繖鏍凤紝閭ｄ箞鎬庝箞瑙ｅ喅鍛紵鍦?./assets/img/pic.jpg鍓嶅姞涓妑equire鍗冲彲锛岄€氳繃require瑙ｆ瀽濡傛灉鐩存帴鍦╤tml涓啓鍥剧墖鐨勮矾寰勶紝鏄病鏈夐棶棰樼殑銆傛祻瑙堝櫒瑙ｆ瀽鐨勬椂鍊欏氨鐭ラ亾杩欐槸瑕佸姞杞界殑鍥剧墖璺緞锛岄偅涔堥€氳繃js鍐欏湪data閲屼笉琛屽悧锛熻窡webpack鐨勯厤缃湁鍏崇郴銆傛墦鍖呭悗浼氱敓鎴愮浉搴旂殑js鍜宑ss銆傚湪瑙ｆ瀽鐨勮繃绋嬩腑锛岀浉褰撲簬鐩存帴瑙ｆ瀽鍦板潃../assets/img/pic4.jpg锛屾病鏈夊搴旂殑js杩涜瑙ｆ瀽銆俽equire("../assets/img/pic.jpg"),require("../assets/img/pic2.jpg")濡備綍瀹炵幇鍥剧墖瀵瑰簲鐨勮疆鎾晥鏋滐紝棣栧厛鍙湁涓€椤甸粯璁ゆ樉绀猴紝浣跨敤v-show鏄敤鏉ユ帶鍒朵竴寮犲浘鐗囩殑鏄剧ず鍜岄殣钘忥紝閭ｄ箞鏄剧ず鍝紶鍥剧墖锛岄殣钘忓摢寮犲浘鐗囧憿锛熶綘鍙渶瑕佸畾涔塶鐨勫€笺€傞€氳繃鍒ゆ柇锛屽彧鏈夊綋n鐨勫€肩瓑浜庡浘鐗囩殑绱㈠紩鍊兼椂鎵嶄細鏄剧ず銆俷==鎴戙€傚彧闇€瑕佸姞涓€涓畾鏃跺櫒锛屾瘡闅旂鏁帮紝鍥剧墖n++锛宮ethods:{play(){this.timer=setInterval(this.autoPlay,2000)},autoPlay(){this.n++;濡傛灉(this.n==this.list.length){this.n=0;}},handleClick(i){this.n=i}},mounted(){this.play()},destroyed(){clearInterval(this.timer)}}鏁版嵁浼犻€掓柟寮忓強璇锋眰1.璺敱闂翠紶閫掑弬鏁?queryandparams)query鍜宲armas鐨勪娇鐢ㄦ柟寮忓ぇ鑷寸浉鍚屻€傝繖閲岀畝鍗曚粙缁嶄竴涓嬭矾鐢遍厤缃€佷紶鍙傚拰璋冪敤params銆倁rl涓笉鏄剧ず鍙傛暟锛屽埛鏂伴〉闈㈡暟鎹秷澶便€?/璺敱鍣ㄩ厤缃畕path:"/two",name:"two",component:two}//璺宠浆锛岃繖閲屾秷鎭槸123銆€銆€銆€銆€this.$router.push({銆€銆€銆€銆€銆€name:\`two\`,銆€銆€//杩欓噷鍙兘鏄痭ame锛屽搴攔oute銆€銆€銆€銆€銆€銆€params:{id:this.message,data:456}銆€銆€銆€銆€});//鎺ユ敹銆€銆€created(){this.msg1=this.$route.params.id//123this.msg2=this.$route.params.data銆€銆€//456}//鏄剧ずurl锛寀rl涓笉鏄剧ず鏁版嵁銆€銆€/two2.query锛屽弬鏁版樉绀哄湪url涓?/璺敱鍣ㄩ厤缃畕path:"/two",name:"two",component:two}//璺宠浆锛岃繖閲屾秷鎭槸123銆€銆€銆€銆€this.$router.push({銆€銆€銆€銆€銆€銆€path:\`/two\`,銆€銆€銆€銆€//杩欓噷鍙互鏄痯ath鎴栬€卬ame锛堝鏋滄槸name锛宯ame:'two'锛夛紝瀵瑰簲璺敱銆€銆€銆€銆€銆€銆€query:{id:this.message,data:456}銆€銆€銆€銆€});//鎺ユ敹銆€銆€created(){this.msg1=this.$route.query.id//123this.msg2=this.$route.query.data銆€銆€//456}//url鏄剧ず锛屾暟鎹樉绀哄湪url銆€銆€/two?id=123&data=456_3銆傚紩鍏xios棣栧厛瑕佸畨瑁卆xios锛屽叏灞€瀹夎cnpmiaxios-S锛岀劧鍚庡湪闇€瑕佺殑椤甸潰importimportaxiosfrom"axios"锛涘綋鐒跺悗鍙伴渶瑕佹彁渚涙帴鍙ｅ鏋滄瘡涓〉闈㈤兘闇€瑕佽姹傛暟鎹紝閭ｈ繖鏍峰氨澶夯鐑︿簡锛屾墍浠ュ彧闇€瑕佸湪main.js涓繖鏍峰啓鍗冲彲锛屼笉闇€瑕佸紩鍏mportaxiosfrom"axios";//axios涓殑default灞炴€у畾涔変簡鍏叡绔彛鍦板潃锛屾墍浠ラ渶瑕佺殑椤甸潰涓嶉渶瑕佸墠闈㈤儴鍒嗭紝淇敼axios.defaults.baseURL="http://127.0.0.1:6222"//瀛樻斁axios鍦╲ue鍘熷瀷瀵硅薄涓瘮杈冩柟渚匡紝$http鐨勮嚜瀹氫箟鍚嶇О鏄疺ue.prototype.$http=axios锛涢偅涔堝搴旂殑axios灏辨槸this.$http//http://127.0.0.1:6222/home/page/1/10"mounted(){this.$http.get("home/page/1/10").then(res=>{console.log(res)})}灏辫繖浜涗簡馃槃锛岀◢鍚庢垜浼氱户缁?..........................................
