vuejs 无法使用 webpack 加载插件的代替方案：使用 RequireJS 按需加载

bootstrap和jquery开发的前端项目中使用vuejs和vuejs的插件

• 传统的前端开发一般使用bootstrap作为模板，用jquery写js动效。而现行的很多vuejs的教程都是基于webpack脚手架打包工具的开发。能否在在bootstrap+jq的架构体系里面使用vue呢。两者有否一个折中的方式，确实有：
  1. html部分

     <div class="row notification--box">
     <div class="col-md-6 notification--recent" id="example-1">
     <div v-for="notificaiton in notifications" class="notification--detial">
         <span>{{ notificaiton.msgTitle }}</span>
     </div>
     </div>
     <div class="col-md-6">2</div>
     </div>

  2. js部分

     <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
     <script>
     new  Vue({
         el:  "#example-1",
         data: {
                 notifications:  <?php  echo  json_encode($notifications['rows']); ?>
                 },
         methods: {
                         }
         });
     </script>
     // 或者用$(function(){})匿名函数包起来也可以
     <script>
     $(function(){
     new  Vue({
         el:  "#example-1",
         data: {
             notifications:  <?php  echo  json_encode($notifications['rows']); ?>
             },
         methods: {
         }
     });
     })
     </script>

• 但要使用基于vuejs的插件呢，以下方式会报错！！！
  1. html

     <div class="row notification--box">
     <div class="col-md-6 notification--recent" id="example-1">
         <vue-scroll :ops="ops">
                 <div v-for="notificaiton in this.notifications" class="notification--detial">
                     <span>{{ notificaiton.msgTitle }}</span>                                
                 </div>
         </vue-scroll>
     </div>
     <div class="col-md-6">2</div>
     </div>

  2. js

     <script>
     import Vue from 'https://unpkg.com/vue@2.6.10/dist/vue.js';
     import vuescroll from 'https://unpkg.com/vuescroll@4.13.1/dist/vuescroll.js';
     Vue.use(vuescroll);
     const vm = new Vue({
     el: "#example-1",
     data: {
         ops: {
             vuescroll: {
                 debounce: 600 
             },
             scrollPanel: {       
             }
         },
         notifications: <?php  echo  json_encode($notifications['rows']); ?>
     },
     methods: {
     }
     });
     </script>

• 使用require.js异步按需加载

  <div class="row notification--box">
  <div class="col-md-6 notification--recent" id="example-1">
      <vue-scroll :ops="ops">
              <div v-for="notificaiton in this.notifications" class="notification--detial">
                  <span>{{ notificaiton.msgTitle }}</span>
              </div>
      </vue-scroll>
  </div>
  <div class="col-md-6">2</div>
  </div>
  <script  type="text/javascript"  src="/js/require.js"></script>
  <script>
  require.config({
      paths: {
      "vue" : ["https://unpkg.com/vue@2.6.10/dist/vue"],
      "vuescroll" : ["https://unpkg.com/vuescroll@4.13.1/dist/vuescroll"]
      }
  })
  require(["vue", "vuescroll"], function(Vue, vuescroll){
      Vue.use(vuescroll);
      new  Vue({
          el:  "#example-1",
          data: {
              ops: {
                  vuescroll: {
                  }
              },
              notifications:  <?php  echo  json_encode($notifications['rows']); ?>
              },
      methods: {
      }
  });
  })
  </script>

• 使用requirejs解决ES6语法不被支持的问题
• vuescroll插件的使用参考：https://vuescrolljs.yvescoding.org/zh/guid...
• require.js使用参考：https://www.jianshu.com/p/b7a0e07591e4和https://www.runoob.com/w3cnote/requirejs-tutorial-2.html及官网