尊龙凯时人生就是搏

ÔõÑùʹÓÃ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¡¢ÍøÕ¾µØͼ