Laravel - thực hiện công việc vue với các plugin khác

Question

Tôi có một dự án mà tôi muốn sử dụng số theme này. Tôi vừa tải xuống và đặt các tập lệnh của nó vào thư mục resources/assets/js. Đây là cách tôi kêu gọi tất cả các kịch bản, sau khi tôi chạy ngụm, mà tôi cần cho trang:

<!-- 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> 

Nhưng sau đó tôi có thể không nhận được thông báo bootstrap hoặc làm việc tooltip, nếu tôi loại bỏ app.js tôi nhận được nó hoạt động trở lại, nhưng sau đó các thành phần vue không hoạt động.

Đây là 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 
}); 

Và đây là 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'); 
}); 

Cập nhật

Tôi đã yêu cầu như craig_h gợi ý ở dưới cùng của bootstrap của tôi .js các tệp như sau:

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

Nhưng tôi nhận được một lỗi:

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

Đây là kịch bản giấy 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); 
    }; 
}; 

tôi xin lỗi nếu điều này là một câu hỏi mới bắt đầu, nhưng tôi đã không được sử dụng hoặc webpack trình duyệt trước vì vậy tôi không biết cách thiết lập tất cả điều này.

Answer 1

tôi không sử dụng webpack tôi sử dụng browserify thay vào đó, nhưng tôi nghĩ rằng vấn đề là bạn đang sử dụng các gói dựa trên các biến toàn cầu, nếu bạn muốn làm điều đó thì bạn cần phải sử dụng một nhà nhập khẩu, xem shimming modules

Tuy nhiên, bạn có thể thường chỉ nhận được ngay với yêu cầu họ trong: /resources/assets/js/bootstrap.js như vậy:

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

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

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

Sau đó chỉ cần chạy gulp

Answer 2

Để giải quyết điều này: try

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

chỉnh sửa paper-dashboard.js và xác định lbd đến phạm vi toàn cầu sử dụng window như thế này:

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