请问用vue+element写的网站可以自适应手机屏幕吗 element-ui适合移动端用么
vue.js+element\u5fc5\u987b\u4f7f\u7528es6\u8bed\u6cd5\u5417\u5176\u5b9e\u3002\u4e0d\u9700\u8981\uff0celement\u4ece\u6765\u6ca1\u6709\u8bf4\u8fc7\u8981\u7528es6\u7684\u8bed\u6cd5\u3002
\u4f46\u662f\u5982\u679c\u4f60\u4e0d\u7528\uff0c\u5f88\u591a\u529f\u80fd\u90fd\u9700\u8981\u4f60\u5bf9javascript\u7684\u6a21\u5757\u5316\u6709\u5f88\u6df1\u7684\u4e86\u89e3\uff0c\u611f\u89c9\u8fd8\u4e0d\u5982\u53bb\u5b66\u4e00\u4e0b\u8bed\u6cd5\uff0c\u6210\u672c\u4f1a\u66f4\u4f4e\u3002
minit\uff0dui\u548celement\uff0dui\uff0c\u524d\u8005\u662f\u79fb\u52a8\u7aef\uff0c\u540e\u8005\u662fPC\u7aef\uff0c\u7ed3\u5408Vue\u529f\u80fd\u4e0d\u9519\uff0c\u5c31\u662fUI\u7ec4\u4ef6\u4e0d\u662f\u5f88\u5f3a\u5927\uff0c\u53ef\u4ee5\u6ee1\u8db3\u4e00\u822c\u7684\u9700\u6c42\u3002
\u6240\u4ee5element\uff0dui\u4e0d\u9002\u5408\u79fb\u52a8\u7aef\u3002
element\uff0dui\u7684\u9700\u6c42\uff1a\u4e30\u5bcc\u7684feature\uff1a\u4e30\u5bcc\u7684\u7ec4\u4ef6\uff0c\u81ea\u5b9a\u4e49\u4e3b\u9898\uff0c\u56fd\u9645\u5316\u3002\u6587\u6863 & demo\uff1a\u63d0\u4f9b\u53cb\u597d\u7684\u6587\u6863\u548c demo\uff0c\u7ef4\u62a4\u6210\u672c\u5c0f\uff0c\u652f\u6301\u591a\u8bed\u8a00\u3002\u5b89\u88c5 & \u5f15\u5165\uff1a\u652f\u6301 npm \u65b9\u5f0f\u548c cdn \u65b9\u5f0f\uff0c\u5e76\u652f\u6301\u6309\u9700\u5f15\u5165\u3002\u5de5\u7a0b\u5316\uff1a\u5f00\u53d1\uff0c\u6d4b\u8bd5\uff0c\u6784\u5efa\uff0c\u90e8\u7f72\uff0c\u6301\u7eed\u96c6\u6210\u3002
\u4f5c\u4e3a\u4e00\u4e2a\u57fa\u7840\u7ec4\u4ef6\u5e93\uff0c\u8fd8\u6709\u4e00\u4e2a\u5f88\u91cd\u8981\u7684\u65b9\u9762\u5c31\u662f\u7ec4\u4ef6\u79cd\u7c7b\u4e30\u5bcc\u3002element\uff0dui\u5b98\u65b9\u76ee\u524d\u670955\u4e2a\u7ec4\u4ef6\uff0c\u5206\u6210\u4e866\u5927\u7c7b\uff0c\u5206\u522b\u662f\u57fa\u7840\u7ec4\u4ef6\u3001\u8868\u5355\u7c7b\u7ec4\u4ef6\u3001\u6570\u636e\u7c7b\u7ec4\u4ef6\u3001\u63d0\u793a\u7c7b\u7ec4\u4ef6\u3001\u5bfc\u822a\u7c7b\u7ec4\u4ef6\u548c\u5176\u5b83\u7c7b\u578b\u7ec4\u4ef6\u3002\u8fd9\u4e9b\u4e30\u5bcc\u7684\u57fa\u7840\u7ec4\u4ef6\u80fd\u5f88\u597d\u5730\u6ee1\u8db3\u5927\u90e8\u5206PC\u7aeftoB\u4e1a\u52a1\u5f00\u53d1\u9700\u6c42\u3002
element\uff0dui\u7684\u7ec4\u4ef6\u6e90\u7801\u5728packages\u76ee\u5f55\u91cc\u7ef4\u62a4\uff0c\u800c\u5e76\u4e0d\u5728src\u76ee\u5f55\u4e2d\uff0c\u8fd9\u4e48\u505a\u7684\u76ee\u7684\u731c\u6d4b\u662f\u4e3a\u4e86\u8ba9\u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5355\u72ec\u6253\u5305\uff0c\u652f\u6301\u6309\u9700\u5f15\u5165\u3002
\u4f46\u5b9e\u9645\u4e0a\u60f3\u8fbe\u5230\u8fd9\u4e2a\u76ee\u7684\u4e5f\u5e76\u4e0d\u4e00\u5b9a\u9700\u8981\u8fd9\u4e48\u53bb\u7ec4\u7ec7\u7ef4\u62a4\u4ee3\u7801\uff0c\u66f4\u63a8\u8350\u628a\u7ec4\u4ef6\u5e93\u4e2d\u7684\u7ec4\u4ef6\u4ee3\u7801\u653e\u5728src\uff0fcomponents\u76ee\u5f55\u4e2d\u7ef4\u62a4\uff0c\u7136\u540e\u901a\u8fc7\u4fee\u6539webpack\u914d\u7f6e\u811a\u672c\u4e5f\u53ef\u4ee5\u505a\u5230\u6bcf\u4e2a\u7ec4\u4ef6\u5355\u72ec\u6253\u5305\u4ee5\u53ca\u652f\u6301\u6309\u9700\u5f15\u5165\uff0c\u6e90\u7801\u653e\u5728src\u76ee\u5f55\u603b\u662f\u66f4\u5408\u7406\u7684\u3002
\u6269\u5c55\u8d44\u6599\uff1a
element\uff0dui\u7ec4\u4ef6\u7684\u6837\u5f0f\u3001\u516c\u5171\u6837\u5f0f\u90fd\u5728packages\uff0ftheme\uff0dchalk\u6587\u4ef6\u4e2d\uff0c\u5e76\u4e14\u5b83\u662f\u53ef\u4ee5\u72ec\u7acb\u53d1\u5e03\u7684\u3002element\uff0dui\u7ec4\u4ef6\u6837\u5f0f\u4e2d\u7684\u989c\u8272\u3001\u5b57\u4f53\u3001\u7ebf\u6761\u7b49\u7b49\u6837\u5f0f\u90fd\u662f\u901a\u8fc7\u53d8\u91cf\u7684\u65b9\u5f0f\u5f15\u5165\u7684\u3002
\u5728packages\uff0ftheme\uff0dchalk\uff0fsrc\uff0fcommon\uff0fvar\uff0escss\u4e2d\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u8fd9\u4e9b\u53d8\u91cf\u7684\u5b9a\u4e49\uff0c\u8fd9\u6837\u5c31\u7ed9\u505a\u591a\u4e3b\u9898\u63d0\u4f9b\u4e86\u65b9\u4fbf\uff0c\u56e0\u4e3a\u6211\u53ea\u8981\u4fee\u6539\u8fd9\u4e9b\u53d8\u91cf\uff0c\u5c31\u53ef\u4ee5\u5b9e\u73b0\u7ec4\u4ef6\u7684\u4e3b\u9898\u6539\u53d8\u3002
updateVarible\u662f\u4e00\u4e2aPOST\u8bf7\u6c42\uff0c\u4ed6\u4f1a\u628a\u4f60\u4fee\u6539\u7684\u7684\u4e3b\u9898\u914d\u7f6e\u63d0\u4ea4\u5230\u540e\u7aefserver\uff0c\u63d0\u4ea4\u7684\u6570\u636e\u4f60\u53ef\u4ee5\u81ea\u5df1\u53bb\u67e5\u770b\u5b83\u7684RequestPayload\uff0c\u8fd9\u4e2aPOST\u8bf7\u6c42\u4f1a\u8fd4\u56de\u4e00\u6bb5CSS\u6587\u672c\uff0c\u7136\u540e\u4f1a\u52a8\u6001\u63d2\u5165\u5230head\u6807\u7b7e\u7684\u5e95\u90e8\uff0c\u6765\u8986\u76d6\u9ed8\u8ba4\u6837\u5f0f\u3002
\u53ef\u4ee5\u901a\u8fc7\u5ba1\u67e5\u5143\u7d20\u770b\u5230head\u5e95\u90e8\u4f1a\u52a8\u6001\u63d2\u5165\u4e00\u4e2aid\u4e3achalk\uff0dstyle\u7684\u6807\u7b7e\u3002
\u53c2\u8003\u8d44\u6599\uff1a\u767e\u5ea6\u767e\u79d1-UI\u8bbe\u8ba1
头文件里加入以下代码
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">-------------------
PHP仿站
绛旓細Vue鐨勮矾鐢卞姛鑳斤紝鐢ㄤ簬椤甸潰涔嬮棿鐨勬棤缂濊烦杞ElementUI涓殑Container甯冨眬鍜孨avMenu瀵艰埅鑿滃崟锛屾瀯寤烘竻鏅扮殑椤甸潰缁撴瀯銆傚疄闄呮搷浣滄楠ゅ涓嬶細鍦╩ain.js涓紩鍏lementUI銆傚竷灞涓婏紝杩愮敤Container鍖哄垎header銆乤side锛堜晶杈规爮锛夈乵ain锛堜富瑕佸唴瀹癸級鍜宖ooter锛屼晶杈规爮鏀剧疆NavMenu銆傜洿鎺缂栧啓璺敱閰嶇疆锛屽鑸爮鐨勭偣鍑讳細閫氳繃璺敱鎺у埗涓婚〉闈...
绛旓細閲嶇偣鍦ㄤ簬搴旂敤Vue鐨勮矾鐢卞姛鑳戒笌ElementUI缁勪欢銆傝矾鐢辫烦杞椤甸潰闂寸殑鍒囨崲娴佺晠鏃犵棔锛屾槸鏋勫缓鍗曢〉闈㈠簲鐢紙SPA锛夌殑鍏抽敭銆傚紩鍏lementUI锛屽苟浣跨敤鍏禖ontainer甯冨眬瀹瑰櫒涓嶯avMenu瀵艰埅鑿滃崟锛屽疄鐜扮晫闈㈢粨鏋勬竻鏅帮紝鍔熻兘鍒嗗尯鏄庣‘銆傚湪main.js涓紩鍏lementUI搴擄紝闅忓悗鐩存帴鏋勫缓椤甸潰甯冨眬銆傞氳繃Container缁勪欢鍒掑垎椤甸潰鍖哄煙锛屽澶撮儴銆佷晶杈规爮銆...
绛旓細鎬讳箣锛岄氳繃宸у鍦鍒╃敤Vue2妗嗘灦涓element-ui缁勪欢鐨勭壒鎬э紝鎴戜滑鍙互杞绘澗瀹炵幇鍔ㄦ佸鍔犺〃鍗曠殑瀹炰緥锛屾弧瓒冲鏍峰寲鐨勫簲鐢ㄩ渶姹傘傝繖鏍风殑瑙ｅ喅鏂规涓嶄粎楂樻晥锛岃屼笖鏄撲簬缁存姢鍜屾墿灞曪紝涓哄紑鍙戣呮彁渚涗簡寮哄ぇ鐨勫伐鍏凤紝浠ュ簲瀵瑰鏉傚鍙樼殑鍓嶇寮鍙戝満鏅
绛旓細鈶 Reactivity锛堝搷搴旀э級锛氱‘淇浣跨敤Vue.js鍝嶅簲鎬х郴缁熸洿鏂版暟鎹紝寮傛鎿嶄綔涓慨鏀规暟鎹渶鍦╒ue.js涓婁笅鏂囦腑鎵ц銆傗懀 缁勪欢鏄惁姝ｇ‘娓叉煋锛氱‘淇濈粍浠跺凡姝ｇ‘娓叉煋锛屽皾璇曟洿鏀圭殑鏁版嵁鍦ㄧ粍浠朵腑鍙銆4锛夎В鍐筹細闂涓哄懆鏈熷拰鍝嶅簲鎬ч棶棰橈紝鍏蜂綋淇敼濡備笅锛氣憼 灏嗘暟鎹幏鍙栫Щ鍔ㄥ埌mounted閽╁瓙涓紝纭繚缁勪欢宸叉覆鏌撳畬鎴愩傗憽 浣跨敤Vue.set...
绛旓細浣跨敤vue寮鍙戦」鐩紝鐢ㄥ埌elementUI锛屾牴鎹畼缃戠殑鍐欐硶锛屾垜浠彲浠ヨ嚜瀹氫箟涓婚鏉ラ傚簲鎴戜滑鐨勯」鐩姹傦紝涓嬮潰鏉ヤ粙缁嶄竴涓嬩袱绉嶆柟娉曞疄鐜扮殑鍏蜂綋姝ラ锛岋紙鍙互鍙傝冨畼鏂规枃妗ｈ嚜瀹氫箟涓婚瀹樻柟鏂囨。锛夛紝鍏堣椤圭洰涓病鏈変娇鐢╯css缂栧啓锛岀敤涓婚宸ュ叿鐨勬柟娉曪紙浣跨敤鐨勮緝澶氾級绗竴绉嶆柟娉曪細浣跨敤鍛戒护琛屼富棰樺伐鍏蜂娇鐢╲ue-cli瀹夎瀹岄」鐩苟寮曞叆element-...
绛旓細1銆佸畨瑁呭ソVue鍜Element-UI锛屽苟鍦ㄩ」鐩腑寮曞叆銆2銆佸湪Vue椤圭洰鐨勫叆鍙ｆ枃浠朵腑锛屽鍏ue鍜孍lement-UI鐨勫簱鏂囦欢銆3銆佸垱寤轰竴涓棩鍘嗙粍浠讹紝鐢ㄦ潵鏄剧ず鏃ュ巻鐨勫熀鏈竷灞鍜屾棩鏈熶俊鎭4銆佸湪搴旂敤涓婚〉闈腑寮曞叆鏃ュ巻缁勪欢锛屾潵鏄剧ず鏃ュ巻鍜屾棩鏈熼夋嫨鍣ㄣ5銆佹渶鍚浣跨敤import璇彞寮曞叆涔嬪墠鍒涘缓鐨勬棩鍘嗙粍浠讹紝鍦╟omponents灞炴т腑娉ㄥ唽锛屽嵆鍙湪vue...
绛旓細Vue 浣跨敤element-ui 椤圭洰涓紩鍏lementui 鍙傝 鍏跺畼缃 瀹夎锛歯pm i element-ui -S 寮曞叆椤圭洰 锛 鍦╩ain.js 涓姞鍏 import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);鐧诲綍妯″潡锛氫娇鐢╡lement form 缁勪欢缂栧啓椤甸潰锛氬湪鐧诲綍鎴愬姛鐨勬柟娉曚腑浣跨敤 ...
绛旓細1.鍦╟omponents涓嬫柊寤轰竴涓猂emoteSearch.vue鏂囦欢锛堟垨鑰呮柊寤轰竴涓枃浠跺す锛屽懡鍚峈emoteSearch锛屼笅闈㈠姞鍏ヤ竴涓猧ndex.vue鏂囦欢锛夛紙鍛藉悕閮芥槸鑷繁闅忔剰鐨勶級2.RemoteSearch.vue鏂囦欢鍐呭濡備笅 3.浣跨敤
绛旓細elementUI鏈夋爡鏍 鍙互鑷傚簲
绛旓細濮撳悕銆佹潈闄愭弿杩扮瓑鍒楋紝鍚敤鐘舵佺敤el-switch灞曠ず銆傝繖鏍风殑璁捐浣垮緱鏁版嵁鐨勫鍒犳敼鏌ユ搷浣滄洿鍔犵洿瑙傦紝鎻愬崌鐢ㄦ埛浣撻獙銆傛讳箣锛element-ui涓Vue琛ㄦ牸鎻愪緵浜嗗己澶х殑娓叉煋鑳藉姏锛岄氳繃鐏垫椿鐨勫姩鎬佺粦瀹氬拰缁勪欢缁勫悎锛屾垜浠彲浠ヨ交鏉惧簲瀵瑰悇绉嶅鏉傜殑琛ㄦ牸灞曠ず闇姹傘傚笇鏈涜繖涓ず渚嬭兘甯姪浣犲湪瀹為檯椤圭洰涓洿濂藉湴杩愮敤element-ui鐨則able缁勪欢銆
