尊龙凯时人生就是博

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 Ä£°å£»

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

Ïà¹ØÐÂÎÅ

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

18523999891

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

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

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