Laravel - 使vue與其他插件一起工作

Question

我有一個項目，我想用這個theme。我剛剛下載並將其腳本放入resources/assets/js目錄。這是我特意打電話所有的腳本，我跑一飲而盡後，我需要的頁面：

<!-- Scripts --> 
<script 
type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" 
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
crossorigin="anonymous"></script> 
<script src="/js/bootstrap.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="/js/material/material.min.js"></script> 
<script type="text/javascript" src="/js/material/ripples.min.js"></script> 
<script>$.material.init()</script> 

<!-- Checkbox, Radio & Switch Plugins --> 
<script src="/js/bootstrap-checkbox-radio.js"></script> 

<!-- Notifications Plugin --> 
<script src="/js/bootstrap-notify.js"></script> 

<!-- Paper Dashboard Core javascript and methods for Demo purpose --> 
<script src="/js/paper-dashboard.js"></script> 



<script type="text/javascript"> 
    $(document).ready(function(){ 
     $.notify({ 
      icon: 'ti-gift', 
      message: "Welcome to <b>Paper Dashboard</b> - a beautiful Bootstrap freebie for your next project." 

     },{ 
      type: 'success', 
      timer: 4000 
     }); 

    }); 
</script> 
<script src="/js/app.js"></script> 

但我不能得到引導通知或提示的工作，如果我刪除app.js我得到它再次工作，但vue組件不起作用。

這是app.js：

/** 
* First we will load all of this project's JavaScript dependencies which 
* include Vue and Vue Resource. This gives a great starting point for 
* building robust, powerful web applications using Vue and Laravel. 
*/ 

require('./bootstrap'); 

var VueResource = require('vue-resource'); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the body of the page. From here, you may begin adding components to 
* the application, or feel free to tweak this setup for your needs. 
*/ 

Vue.component('video-upload', require('./components/VideoUpload.vue')); 
Vue.component('video-player', require('./components/VideoPlayer.vue')); 
Vue.component('video-voting', require('./components/VideoVoting.vue')); 

Vue.use(VueResource); 

const app = new Vue({ 
    el: 'body', 
    data: window.videoApp 
}); 

這是gulpfile：

const elixir = require('laravel-elixir'); 

require('laravel-elixir-vue'); 

/* 
|-------------------------------------------------------------------------- 
| Elixir Asset Management 
|-------------------------------------------------------------------------- 
| 
| Elixir provides a clean, fluent API for defining some basic Gulp tasks 
| for your Laravel application. By default, we are compiling the Sass 
| file for our application, as well as publishing vendor resources. 
| 
*/ 

elixir(mix => { 
    mix.copy('resources/assets/js', 'public/js'); 
    mix.copy('resources/assets/css', 'public/css'); 

    mix.sass('app.scss') 
     .webpack('app.js'); 
}); 

更新

爲craig_h在我的引導底部，建議我已要求.js這樣的文件：

require('./bootstrap-checkbox-radio.js'); 
require('./bootstrap-notify.js'); 
require('./paper-dashboard.js'); 

但我得到一個錯誤：

paper-dashboard.js?16eb:26Uncaught ReferenceError: lbd is not defined(…)

這是腳本紙dashboard.js：

var fixedTop = false; 

var navbar_initialized = false; 

$(document).ready(function(){ 
    window_width = $(window).width(); 

    // Init navigation toggle for small screens 
    if(window_width <= 991){ 
     lbd.initRightMenu(); 
    } 

    // Activate the tooltips 
    $('[rel="tooltip"]').tooltip(); 

}); 

// activate collapse right menu when the windows is resized 
$(window).resize(function(){ 
    if($(window).width() <= 991){ 
     lbd.initRightMenu(); 
    } 
}); 

lbd = { 
    misc:{ 
     navbar_menu_visible: 0 
    }, 

    initRightMenu: function(){ 
     if(!navbar_initialized){ 
      $off_canvas_sidebar = $('nav').find('.navbar-collapse').first().clone(true); 

      $sidebar = $('.sidebar'); 
      sidebar_bg_color = $sidebar.data('background-color'); 
      sidebar_active_color = $sidebar.data('active-color'); 

      $logo = $sidebar.find('.logo').first(); 
      logo_content = $logo[0].outerHTML; 

      ul_content = ''; 

      // set the bg color and active color from the default sidebar to the off canvas sidebar; 
      $off_canvas_sidebar.attr('data-background-color',sidebar_bg_color); 
      $off_canvas_sidebar.attr('data-active-color',sidebar_active_color); 

      $off_canvas_sidebar.addClass('off-canvas-sidebar'); 

      //add the content from the regular header to the right menu 
      $off_canvas_sidebar.children('ul').each(function(){ 
       content_buff = $(this).html(); 
       ul_content = ul_content + content_buff; 
      }); 

      // add the content from the sidebar to the right menu 
      content_buff = $sidebar.find('.nav').html(); 
      ul_content = ul_content + '<li class="divider"></li>'+ content_buff; 

      ul_content = '<ul class="nav navbar-nav">' + ul_content + '</ul>'; 

      navbar_content = logo_content + ul_content; 
      navbar_content = '<div class="sidebar-wrapper">' + navbar_content + '</div>'; 

      $off_canvas_sidebar.html(navbar_content); 

      $('body').append($off_canvas_sidebar); 

      $toggle = $('.navbar-toggle'); 

      $off_canvas_sidebar.find('a').removeClass('btn btn-round btn-default'); 
      $off_canvas_sidebar.find('button').removeClass('btn-round btn-fill btn-info btn-primary btn-success btn-danger btn-warning btn-neutral'); 
      $off_canvas_sidebar.find('button').addClass('btn-simple btn-block'); 

      $toggle.click(function(){ 
       if(lbd.misc.navbar_menu_visible == 1) { 
        $('html').removeClass('nav-open'); 
        lbd.misc.navbar_menu_visible = 0; 
        $('#bodyClick').remove(); 
        setTimeout(function(){ 
         $toggle.removeClass('toggled'); 
        }, 400); 

       } else { 
        setTimeout(function(){ 
         $toggle.addClass('toggled'); 
        }, 430); 

        div = '<div id="bodyClick"></div>'; 
        $(div).appendTo("body").click(function() { 
         $('html').removeClass('nav-open'); 
         lbd.misc.navbar_menu_visible = 0; 
         $('#bodyClick').remove(); 
         setTimeout(function(){ 
          $toggle.removeClass('toggled'); 
         }, 400); 
        }); 

        $('html').addClass('nav-open'); 
        lbd.misc.navbar_menu_visible = 1; 

       } 
      }); 
      navbar_initialized = true; 
     } 

    } 
} 


// Returns a function, that, as long as it continues to be invoked, will not 
// be triggered. The function will be called after it stops being called for 
// N milliseconds. If `immediate` is passed, trigger the function on the 
// leading edge, instead of the trailing. 

function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     clearTimeout(timeout); 
     timeout = setTimeout(function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }, wait); 
     if (immediate && !timeout) func.apply(context, args); 
    }; 
}; 

我的道歉，如果這是一個begginers的問題，但我還沒有使用的WebPack或之前browserify所以我不知道如何設置所有這一切。

Answer 1

我不使用webpack我用browserify代替，但我認爲問題是，你正在使用依賴於全局變量，如果你想這樣做，那麼你需要使用的供應包，見shimming modules

但是，您可以通常只是僥倖，要求他們在：/resources/assets/js/bootstrap.js像這樣：

require('./bootstrap-checkbox-radio.js')

require('./bootstrap-notify.js')

require('./paper-dashboard.js')

然後只需運行gulp

Answer 2

要解決這個問題：

paper-dashboard.js?16eb:26Uncaught ReferenceError: lbd is not defined(…)

嘗試編輯paper-dashboard.js和使用window這樣定義lbd全球範圍：

... 
window['lbd'] = { 
    misc:{ 
     navbar_menu_visible: 0 
    }, 
...