尊龙凯时人生就是博

ÔõÑùʹÓÃLaravel Mix´ò°üÇ°¶Ë×ÊÔ´Îļþ£¿

laravel mixÊÇÒ»¸öÇ¿Ê¢µÄÇ°¶Ë¹¹½¨¹¤¾ß £¬Ëü¿ÉÒÔ×ÊÖúÄã´ò°üºÍÓÅ»¯Ç°¶Ë×ÊÔ´Îļþ £¬ºÃ±Èjavascript¡¢css¡¢Í¼Æ¬µÈ¡£Ëü»ùÓÚwebpack £¬²¢ÌṩÁËÒ»¸ö¼òÆÓ¶øÇ¿Ê¢µÄapiÀ´Ê¹Ç°¶Ë×ÊÔ´µÄÖÎÀíºÍ´ò°ü±äµÃ¸üÈÝÒס£

ÔÚ±¾ÆªÎÄÕÂÖÐ £¬ÎÒÃǽ«Ñ§Ï°ÔõÑùʹÓÃLaravel MixÀ´´ò°üÇ°¶Ë×ÊÔ´Îļþ £¬²¢½«ËüÃÇÓÅ»¯³ÉΪһ¸ö¼òÆÓÒ×ÓõÄÎļþ¡£

×°ÖÃLaravel Mix

Ê×ÏÈ £¬ÎÒÃÇÐèҪװÖÃLaravel Mix¡£Äã¿ÉÒÔʹÓÃnpm»òÕßyarnÀ´×°Öá£

ÈôÊÇÄãʹÓÃnpm £¬ÇëÔËÐÐÒÔÏÂÏÂÁ

Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»

npm install laravel-mix --save-dev

µÇ¼ºó¸´ÖÆ

ÈôÊÇÄãʹÓÃyarn £¬ÇëÔËÐÐÒÔÏÂÏÂÁ

yarn add laravel-mix --dev

µÇ¼ºó¸´ÖÆ

³õʼ»¯Laravel Mix

×°ÖÃÍê³Éºó £¬ÔÚÄãµÄÏîÄ¿¸ùĿ¼ÏÂн¨Ò»¸öÃûΪwebpack.mix.jsµÄÎļþ¡£È»ºó £¬ÔÚ¸ÃÎļþÖÐÊäÈëÒÔÏ´úÂ룺

let mix = require('laravel-mix');

µÇ¼ºó¸´ÖÆ

ÕâÀïÎÒÃÇÒýÈëÁËlaravel-mixÄ£¿é £¬²¢¸³Öµ¸ømix±äÁ¿¡£

½ÓÏÂÀ´ £¬ÎÒÃÇ¿ÉÒÔʹÓÃmix±äÁ¿ÖÐÌṩµÄÒªÁìÀ´×îÏȳõʼ»¯Laravel Mix¡£

ÀýÈç £¬ÈôÊÇÄãÏëÒª´ò°ü¶à¸öCSSÎļþΪһ¸öÎļþ £¬²¢½«Æ临ÖƵ½public/cssÎļþ¼ÐÏ £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂ룺

mix.styles([
    'resources/css/app.css',
    'resources/css/custom.css'
], 'public/css/all.css');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á´ò°üapp.cssºÍcustom.css £¬È»ºó½«ËüÃÇÉúÑÄÔÚpublic/css/all.cssÏ¡£

ÔÙÀýÈç £¬ÈôÊÇÄãÒª´ò°ü¶à¸öjavascriptÎļþΪһ¸öÎļþ £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂ룺

mix.scripts([
    'resources/js/app.js',
    'resources/js/custom.js'
], 'public/js/all.js');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á´ò°üapp.jsºÍcustom.js £¬È»ºó½«ËüÃÇÉúÑÄÔÚpublic/js/all.jsÏ¡£

±àÒëLESS»òSASS

ÕæÕýÈÃLaravel Mix³ö²ÊµÄÌØÕ÷Ö®Ò»¾ÍÊÇËüÖ§³ÖCompiling LESS»òSASSÎļþ¡£

ÈôÊÇÄãµÄÏîĿʹÓÃLESS»òSASS £¬Äã¿ÉÒÔʹÓÃmix.less()»òmix.sass()ÒªÁìÇáËɵرàÒëÕâЩÎļþ¡£

ÀýÈç £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂëÀ´±àÒëÒ»¸öLESSÎļþ²¢½«ÆäÉúÑÄÔÚpublic/cssÏ£º

mix.less('resources/less/app.less', 'public/css');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á±àÒëapp.lessÎļþ £¬²¢½«±àÒëºóµÄCSSÎļþÉúÑÄÔÚpublic/cssÏ¡£

ÉõÖÁ £¬Ä㻹¿ÉÒÔʹÓÃmix.less()»òmix.sass()ÒªÁìÀ´´ò°ü¶à¸öÎļþ £¬½«ËüÃDZàÒëΪһ¸öÎļþ £¬²¢½«ÆäÉúÑÄÔÚpublic/cssÏ¡£

ÀýÈç £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂëÀ´´ò°ü¶à¸öLESSÎļþ²¢½«ÆäÉúÑÄÔÚpublic/cssÏ£º

mix.less([
    'resources/less/app.less',
    'resources/less/custom.less'
], 'public/css/all.css');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á´ò°üapp.lessºÍcustom.lessÎļþ £¬È»ºó½«ËüÃDZàÒëΪCSSÎļþ²¢ÉúÑÄÔÚpublic/css/all.cssÏ¡£

±àÒëReactÎļþ

ÈôÊÇÄãÔÚÏîÄ¿ÖÐʹÓÃÁËReact £¬Äã¿ÉÒÔʹÓÃLaravel MixµÄReactÒªÁìÀ´±àÒëËüÃÇ¡£

ÀýÈç £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂëÀ´±àÒëReactÎļþ²¢½«ËüÃÇÉúÑÄÔÚpublic/jsÏ£º

mix.react('resources/js/app.js', 'public/js');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á±àÒëapp.jsÎļþ £¬²¢½«±àÒëºóµÄJSÎļþÉúÑÄÔÚpublic/jsÏ¡£

ÎÞÂÛÄãʹÓÃʲôÑùµÄReactÓïÑÔ £¬Laravel Mix¶¼ÌṩÁËÏìÓ¦µÄ±àÒëÒªÁì¡£

ÓÅ»¯Ç°¶Ë×ÊÔ´Îļþ

³ýÁË´ò°üÇ°¶Ë×ÊÔ´ÎļþÍâ £¬Laravel Mix»¹ÌṩÁËһЩÆäËûµÄÓÅ»¯·½·¨¡£

Äã¿ÉÒÔʹÓÃmix.version()ÒªÁìÀ´Îª´ò°üºóµÄÎļþÌí¼Ó°æ±¾ºÅ¡£Õ⽫»á×ÊÖúÄã½â¾ö»º´æÎÊÌâ¡£

ÀýÈç £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂëÀ´Îª´ò°üºóµÄÎļþÌí¼Ó°æ±¾ºÅ£º

mix.version();

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»á×Ô¶¯Îª´ò°üºóµÄÎļþÌí¼Ó°æ±¾ºÅ £¬²¢½«ÆäÉúÑÄÔÚmix-manifest.jsonÖС£

ÁíÍâ £¬Ä㻹¿ÉÒÔʹÓÃmix.setPublicPath()ÒªÁìÀ´ÉèÖôò°üºóµÄÎļþµÄ¹«¹²Â·¾¶¡£Õ⽫»á×ÊÖúÄã¸üºÃµÄÖÎÀíÄãµÄÇ°¶Ë×ÊÔ´¡£

ÀýÈç £¬Äã¿ÉÒÔÊäÈëÒÔÏ´úÂëÀ´ÉèÖôò°üºóµÄÎļþµÄ¹«¹²Â·¾¶£º

mix.setPublicPath('public/assets');

µÇ¼ºó¸´ÖÆ

¸Ã´úÂ뽫»áÉèÖôò°üºóµÄÎļþµÄ¹«¹²Â·¾¶Îªpublic/assets¡£

½áÂÛ

Laravel MixÊÇÒ»¸öºÜÊǺÃÓÃÇÒÇ¿Ê¢µÄÇ°¶Ë¹¹½¨¹¤¾ß £¬Ëü¿ÉÒÔ×ÊÖúÄã´ò°üºÍÓÅ»¯Ç°¶Ë×ÊÔ´Îļþ £¬Ê¹Ö®Ô½·¢¼òÆÓÒ×Óá£ÔÚʹÓÃLaravel Mixʱ £¬ÄãÖ»ÐèÒªÏàʶһЩ»ù±¾µÄAPI £¬Äã¾Í¿ÉÒÔÇáËɵØÍê³É´ò°üÇ°¶Ë×ÊÔ´ÎļþµÄÊÂÇé¡£

ÒÔÉϾÍÊÇÔõÑùʹÓÃLaravel Mix´ò°üÇ°¶Ë×ÊÔ´Îļþ£¿µÄÏêϸÄÚÈÝ £¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí £¬°æȨÕùÒéÓë±¾Õ¾ÎÞ¹Ø £¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í尊龙凯时人生就是博ÂËÓÍ»úÍø¹Ù·½Ì¬¶È £¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ £¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢ £¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢ £¬ÇëÄúÁ¬Ã¦ÁªÏµ尊龙凯时人生就是博ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ尊龙凯时人生就是博

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎå £¬9:30-18:30 £¬½ÚãåÈÕÐÝÏ¢

QR code
sitemap¡¢ÍøÕ¾µØͼ