div{display:flex;}Vue3椤圭洰浠庨浂寮€濮嬫惌寤洪」鐩強鎻掍欢鐨勪娇鐢ㄦ湰鏂囦富瑕佷粠椤圭洰鎼缓鍒伴」鐩疄鎴橈紝涓€姝ユ瀛︿範Vue3椤圭洰鎼缓鍜屼竴浜涙彃浠躲€佸簱鐨勪娇鐢紝鍑忓皯鍧戙€傞槄璇讳笁杩炵幆锛氱偣璧烇紙馃憤锛夈€佸叧娉紙馃槏锛夈€佹敹钘忥紙馃摑锛夈€傛湰鏂囧凡涓婁紶鑷砱ithub(demo)锛屾洿澶氬線鏈熸枃绔犲凡鏁寸悊銆傛枃瀛楃炕璇憂odev12.16.2npm6.14.9completepackage.json{"name":"vue3-demo","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint"},"dependencies":{"core-js":"^3.6.5","vue":"^3.0.0","vue-router":"^4.0.1"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","ant-design-vue":"^2.0.0-rc.5","autoprefixer":"^9.8.6","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^7.0.0-0","postcss":"^8.2.1","postcss-loader":"^4.1.0","sass":"^1.30.0","sass-loader":"^10.1.0","vuex":"^4.0.0-rc.2"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/vue3-essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"},"rules":{}},"browserslist":[">1%","last2versions","notdead"]}1.鍒濆鍖栭」鐩?.1浣跨敤Vue3,闇€瑕佸崌绾ue-cli锛屽叏灞€瀹夎绗竴涓増鏈珸vue/cli锛沶pminstall-g@vue/cli@next1.2瀹夎鎴愬姛鍚庯紝鍥炶溅鏄剧ず锛屽畨瑁呮垚鍔?vue-V@vue/cli4.5.41.3瀹夎鎴愬姛vuecli4锛屼娇鐢ㄥ涓嬪懡浠ゅ嵆鍙垱寤轰竴涓獀ue3椤圭洰锛涜繍琛寁uecreatevue3-demo锛氬湪Manuallyselectfeatures涓緭鍏ue3閫夋嫨vue3鐗堟湰锛?璇烽€夋嫨涓€涓璁撅細锛堜娇鐢ㄦ柟鍚戦敭锛?true([Vue2]dart-sass,babel,typescript,router,vuex,unit-mocha,e2e-cypress)Default([Vue2]babel,eslint)Default(Vue3Preview)([Vue3]babel,eslint)ManuallyselectfeaturesVue31.4startservicevue3-demo//杈撳叆鏂囦欢npmrunserve//杩愯椤圭洰浣跨敤娴忚鍣ㄨ闂細http://localhost:8080/锛屽鍥?.4椤圭洰鏂囦欢鍒楄〃鈹溾攢.gitignore鈹溾攢.git鈹溾攢node_modules鈹溾攢babel.config.js鈹溾攢package-lock.json鈹溾攢package.json鈹溾攢README.md鈹溾攢src|鈹溾攢App.vue|鈹溾攢main.js|鈹溾攢缁勪欢||鈹擧elloWorld.vue|鈹溾攢璧勪骇||鈹攍ogo.png鈹溾攢鍏紑|鈹溾攢favicon.ico|鈹攊ndex.html2.閰嶇疆PostCSSPostCSS鎻掍欢杞崲CSS浠ｇ爜锛屽鍔犱唬鐮佸彲璇绘€т娇鐢ㄥ彇鑷狢anIUse缃戠珯鐨勬暟鎹皢鐗瑰畾浜庝緵搴斿晢鐨勫墠缂€娣诲姞鍒癈SS瑙勫垯銆侫utoprefixer鑷姩鑾峰彇娴忚鍣ㄧ殑娴佽搴﹀拰鏀寔鐨勫睘鎬э紝骞舵牴鎹繖浜涙暟鎹府鍔╀綘鑷姩涓篊SS瑙勫垯娣诲姞鍓嶇紑銆?.1瀹夎postcss銆乸ostcss-loader銆乤utoprefixer鎻掍欢锛沶pmipostcsspostcss-loaderautoprefixer@9.8.6-Dautoprefixer浣跨敤9.8.6鐗堟湰涓昏鏄洜涓轰笌postcss鐨勫吋瀹规€ч棶棰橈紝autoprefixer榛樿浣跨敤鏈€鏂扮増鏈€?.2鍦╲ue3-demo椤圭洰涓嬪垱寤簆ostcss.config.js鏂囦欢锛?/鍒涘缓postcss.config.jstouchpostcss.config.js//postcss.config.jsmodule.exports={plugins:[//閰嶇疆Autoprefixer鎻掍欢require('autoprefixer')({//鏈€鍚庝袱涓増鏈殑娴忚鍣?overrideBrowserslist':['last2versions']})],};2.3鍦ˋpp.vue涓緭鍏ュ涓嬩唬鐮侊紝鍐嶆杩愯锛?template>123
div{display:flex;}閫氳繃娴忚鍣ㄦ煡鐪嬭緭鍑猴細div{display:-webkit-box;鏄剧ず锛?ms-flexbox锛沝isplay:flex;}3銆侀厤缃瓹ss棰勫鐞嗚瑷€鈥斺€擲ass3.1浣跨敤濡備笅鍛戒护瀹夎Sass锛沶pminstallsasssass-loader-D3.2瀹夎sass鍚庯紝鎴戜滑鍦ˋpp.vue涓娇鐢⊿ass锛?!--App.vue-->123
$棰滆壊锛?f00锛沝iv{鏄剧ず锛歠lex;color:$color,}鍒拌繖閲屾垜浠氨鍙互鍦ㄩ〉闈笂浜嗭紝鏂囧瓧宸茬粡鏄孩鑹蹭簡4銆侀厤缃甎I缁勪欢搴?.1浣跨敤濡備笅鍛戒护瀹夎UI缁勪欢ant-design-vue@next锛宎nt-design-vue缁勪欢宸茬粡鏀寔Vue3锛沶pmiant-design-vue@next-D4.2inmain.js锛屽叏灞€瀵煎叆ant-design-vue缁勪欢搴?/main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importantdfrom'ant-design-vue'import'ant-design-vue/dist/antd.css'constapp=createApp(App)app.use(Antd)app.mount('#app')4.3寮曞叆ant-design-App.vue涓殑vue缁勪欢锛?template>涓婚〉鐢ㄦ埛Tom(collapsed=!collapsed)"/>(collapsed=!collapsed)鎶樺彔锛?/>#components-layout-demo-custom-trigger{height:100vh;.trigger{瀛椾綋澶у皬锛?8px锛涜楂橈細64px锛涘～鍏咃細024px锛涙父鏍囷細鎸囬拡锛涜繃娓★細棰滆壊0.3s锛?:hover{棰滆壊锛?1890ff;}}.logo{楂樺害锛?2px锛涜儗鏅細rgba锛?55銆?55銆?55銆?.2锛夛紱杈硅窛锛?6px锛泒}.main{杈硅窛锛?4px16px;濉厖锛?4px锛涜儗鏅細#fff锛涢珮搴︼細璁＄畻锛?00%-64px锛夛紱5.閰嶇疆璺敱vue-router5.1涓嬭浇瀹夎vue-routernpminstallvue-router@45.2瀹夎鎴愬姛鍚庯紝鍦╯rc涓垱寤簐iews鏂囦欢澶癸紝鍒涘缓涓や釜鏂囦欢home.vue`user.vue`锛沨ome.vue鏂囦欢Homeuser.vue鏂囦欢User5.3鍦╯rc涓垱寤簉outer鏂囦欢澶癸紝骞跺垱寤篿ndex.js鏂囦欢import{createRouter,createWebHashHistory}from'vue-router'constHome=()=>import('./../views/home.vue')constUser=()=>import('./../views/user.vue')constroutes=[{璺緞:'/home',name:'home',component:Home},{path:'/user',name:'user',component:User},{path:'/',redirect:'/home',component:Home}]exportdefaultcreateRouter({history:createWebHashHistory(),routes});5.4inmain.jsReferencevue-router;//main.jsimportrouterfrom'./router/index.js'...app.use(router)5.5鍦ˋpp.vue涓?鍙锋坊鍔犳柟娉昺enuClick;瀹炵幇璺敱璺宠浆锛屾坊鍔犳柟娉昺enuClickmethodsmethods:{menuClick(e){//璺敱璺宠浆鍒皌his.$router.push(e.key)}}绛夐〉闈㈡洿鏂帮紝鎴戜滑鍙互鐐瑰嚮user鍜宧onemenus鐪嬫晥鏋?.閰嶇疆鐘舵€佺鐞嗗櫒Vuex6.1瀹夎vuex;npminstallvuex@next-D6.2鍦╯rc涓垱寤簊tore鏂囦欢澶癸紝骞跺垱寤篿ndex.js鏂囦欢锛涘苟鍦ㄧ姸鎬佷腑瀛樺偍璁℃暟鍊硷紱鍦ㄧ獊鍙樹腑鍒涘缓涓€涓搷浣滃閲忥紝姣忔鍔?锛沬mport{createStore}from'vuex'exportdefaultcreateStore({//瀛樺偍鐘舵€乻tate:{count:0},mutations:{//operationincrement(state){state.count++}},actions:{},modules:{}})6.3鍦╩ain.js涓紩鍏uex锛沬mportstorefrom'./store/index.js'...app.use(store)6.4鍦╤ome.vue涓坊鍔犱竴涓寜閽紝骞朵娇鐢╟ount鐨勫€硷紱閫氳繃Vuex鐨勬寜閽甐alue杩涜鏇存柊銆?template>浣跨敤璁℃暟鐘舵€亄{this.$store.state.count}}
鐐瑰嚮鐘舵€佹坊鍔犱竴涓?/a-button>鎬荤粨杩欑瘒鏂囩珷姣旇緝鍩虹锛屼絾鏄牴鎹互涓婃楠わ紝灏卞彲浠ユ瀯寤洪」鐩簡銆備粖澶╃殑Vue3椤圭洰鎼缓灏卞埌杩欓噷銆傝繕鏈夊緢澶氭彃浠舵殏鏃朵笉鑳界敤锛屼互鍚庝細鏇存柊銆傝秺鏉ヨ秺澶氱殑鎻掍欢灏嗘敮鎸乂ue3銆傛渶鍚庯紝濡傛灉鎮ㄥ枩娆㈡垨鑰呭鎮ㄦ湁鐢紝璇风偣涓禐锛堭煈嶐煈嶐煈嶏級锛?鈺碘暟)(鈺碘暟)(鈺碘暟)銆傚弬鑰僔ue鏂囨。postcssautoprefixer
