thinkphpÖÐÔõÑùʹÓÃvue
Ëæ×Å web ÊÖÒÕµÄÒ»Ö±Éú³¤£¬Ç°ºó¶ËÊèÉ¢ÒѾ³ÉΪÁËÒ»ÖÖÇ÷ÊÆ¡£Ç°¶Ë¿ò¼Ü vue.js ÏÖÔÚÒ²Ô½À´Ô½Ê¢ÐУ¬ÄÇôÔÚ thinkphp ÖÐÔõÑùʹÓà vue ÄØ£¿±¾ÎĽ«ÏÈÈÝʹÓà thinkphp5.1 ¿ò¼Ü¼¯³É vue.js µÄÒªÁì¡£
Ò»¡¢×°ÖÃ Node.js
ÔÚ×îÏÈ֮ǰ£¬È·±£ÄãÒÑ×°Öà Node.js ÇéÐΣ¬ÈôδװÖÿÉÇ°Íù¹ÙÍøÏÂÔز¢¾ÙÐÐ×°Öá£
¶þ¡¢½¨ÉèÐÂÏîÄ¿
ʹÓà Composer ÏÂÁÔÚÖÕ¶ËÊäÈëÒÔÏÂÏÂÁ
Á¬Ã¦Ñ§Ï°¡°PHPÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
composer create-project topthink/think=5.1.* myapp
µÇ¼ºó¸´ÖÆ
ÔËÐÐÒÔÉÏÏÂÁîºó£¬»áÔÚÄ¿½ñ·¾¶ÏÂÌìÉúÒ»¸ö myapp Îļþ¼Ð¡£½Ó×ÅÔËÐÐÒÔϽøÈëĿ¼²¢×°Öà ThinkPHP ÒÀÀµ£º
cd myapp composer install
µÇ¼ºó¸´ÖÆ
Èý¡¢×°ÖÃÇ°¶ËÒÀÀµ
ÔÚÈ·ÈÏÒѽøÈë myapp Ŀ¼ºó£¬ÔÚÏÂÁîÐй¤¾ßÖÐÊäÈëÒÔÏÂÖ¸ÁװÖÃËùÐèÇ°¶ËÒÀÀµ£º
npm install
µÇ¼ºó¸´ÖÆ
×°ÖÃÍê³Éºó£¬¿ÉÔÚ myapp Ŀ¼Ï嵀 node_modules Îļþ¼ÐÖУ¬¿´µ½ÒÑÀÖ³É×°ÖõÄÒÀÀµ°ü¡£
ËÄ¡¢ÉèÖà webpack.mix.js
webpack.mix.js ÎļþÓÃÓÚÒýÈë×Ô½ç˵µÄ±àÒëÆ÷ºÍÇ°¶ËÒÀÀµ°üÖ®¼äµÄÁªÏµ¡£Í¨¹ý webpack.mix.js Îļþ£¬Äܹ»¶¨ÖÆÔõÑù¹¹½¨ºÍ´ò°üÇ°¶Ë´úÂë¡£
ÔÚ myapp ÏîÄ¿Îļþ¼ÐÏ£¬½¨ÉèÒ»¸öÐÂÎļþ webpack.mix.js£¬Ìí¼ÓÒÔÏ´úÂ룺
let mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂëµÄ×÷ÓÃÊÇ£º
ÒýÈë Laravel Mix ¹¤¾ß
Ö¸¶¨Èë¿ÚÎļþ resources/js/app.js ºÍ×ÊÔ´±àÒëÊä³ö·¾¶ public/js
Ö¸¶¨ Sass Èë¿ÚÎļþ·¾¶ resources/sass/app.scss ºÍ±àÒëÊä³ö·¾¶ public/css
˳±ã˵һ¾ä£¬Laravel Mix ÊÇÒ»¸ö½« Webpack ÓëÆäËû¹¹½¨¹¤¾ßÍŽáµÄ¹¤¾ß£¬ÓÃÓÚͳһǰ¶ËÊÂÇéÁ÷³Ì¡£
Îå¡¢½¨Éè Vue.js ×é¼þ
ÔÚ×îÏȱàд Vue.js ×é¼þ֮ǰ£¬Ê×ÏÈÐèҪн¨Ò»¸ö resources/views Ŀ¼£¬²¢ÔÚÆäÏÂн¨Ò»¸öÎļþ¼Ð index£¬ÔÚ index Îļþ¼ÐÖÐн¨Ò»¸öÃûΪ vue.blade.php µÄÎļþ¡£Õâ¸öÎļþ½«»áÊÇ Vue.js ×é¼þµÄäÖȾģ°å£¬´úÂëÈçÏ£º
<!DOCTYPE html> <html> <head> <title>Vue component - ThinkPHP</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /> </head> <body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂëÖУº
ÓÃÓÚ¿çÓò¹¥»÷·ÀÓù£»
ÒýÈëÑùʽ£»
×÷Ϊ Vue.js ×é¼þµÄÈÝÆ÷£»
¼´Îª Vue.js ×é¼þ¡£
½ÓÏÂÀ´ÔÚ resources/js/ Ŀ¼ÏÂн¨Ò»¸öÎļþ¼Ð components£¬²¢ÔÚÆäÖÐн¨ ExampleComponent.vue Îļþ¡£Õâ¸öÎļþÊÇÒ»¸ö Vue µ¥Îļþ×é¼þ£¬½«»á±»äÖȾµ½ vue.blade.php Îļþ¡£´úÂëÈçÏ£º
<template> <div class="container"> <h1 class="title">Vue component - ThinkPHP</h1> <p>Message: {{ message }}</p> </div> </template> <script> export default { data () { return { message: 'Hello, Vue!' } } } </script> <style> .container { margin: 0 auto; max-width: 640px; } .title { font-size: 32px; color: #333; } </style>
µÇ¼ºó¸´ÖÆ
ÒÔÉÏ´úÂëÖУº
±êÇ©ÓÃÓÚ²åÈë HTML Ä£°å£»