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及官网
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!