zoukankan      html  css  js  c++  java
  • require.js使用baseUrl + paths导入文件配置的3种方法

    //main.js 

    requirejs.config({
    baseUrl: 'lib/js',//参照于引入这个js文件的index.html页面的相对路径,因为此时mian.js文件已经导入到了index.html中
    paths: {
    'jquery': 'jquery-1.8.3.min',//lib/js目录下的文件名,都是js可省略后缀.js
    'vue' : 'vue',
    'Slide' : 'TouchSlide.1.1'
    }
    });

    //index.html
    首先require.js与main.js文件的script标签引入,要放在body前面,在head标签中引用即可
    第一种:用函数封装法
    <head>
      <script data-main="lib/main.js" src="lib/require.js"></script>
    </head>
    <body>
    <button onclick="cb_click()"></button>
    </body>
    <script>
    function cb_click() {
    require(['jquery', 'vue'], function ($, Vue) {
    $('body').css('background', 'blue');
    var add = {
    template: "<div>这就是一个用例</div>"
    }
    new Vue({
    el: '#app',
    data: function () {
    return {
    seller: {
    type: Object
    }
    }
    },
    template: "<v-add></v-add>",
    components: {
    'v-add': add
    }
    })
    })
    }
    </script>

    第二种与第三种:不是函数封装,直接require(['jquery', 'vue'], function ($, Vue) { })会造成同步加载不出,异步加载失败
      第二种: require(['jquery', 'vue'], function ($, Vue) { })放到main.js文件中,
           放到requirejs.config({ })方法的后面

    第三种:直接把<script data-main="lib/main.js" src="lib/require.js"></script>
    拆分成 <script src="lib/require.js"></script> 与
               <script src="lib/main.js"></script>
    然后就可以在index.html页面直接在其后面用require(['jquery', 'vue'], function ($, Vue) { })引入模块了


    
    






  • 相关阅读:
    NSString
    xib和storyboard的使用方法
    drawRect画线和使用CGContext
    CGAffineTransform动画
    【概念】静态成员
    【c#】Application.Exit和Close有什么不同
    【c#】const和readonly关键字
    【概念】设计模式
    【概念】常见数据结构与算法
    【概念】索引器
  • 原文地址:https://www.cnblogs.com/MrZouJian/p/6637105.html
Copyright © 2011-2022 走看看