前端 - 外部插件

后台管理 UI 插件基于 requirejs 管理，下面是一些简单例子，更多用法请阅读官方文档 requirejs，对于非 AMD/CMD 插件可以直接用 script 标签加载。

这里要特别注意，ThinkAdmin 后台大部分页面是单页程序要注意 JS 对象冲突，部分插件需要做对象销毁，否则有可能造成插件二次初始化异常。

<script>

    // 加载配置 AMD/CMD 插件
    require(['md5'], function (md5) {
        var value = md5.hash('test');
        // console.log(value)
    });

    // 加载百度图表
    require(['echarts'], function (echarts) {
        echarts.init($options)
    });

    // 加载外部插件
    require(['https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js'], function (vue) {
        console.log(vue)
    });

</script>


// RequireJs 默认配置如下
<script>
    require.config({
        waitSeconds: 60,
        baseUrl: baseRoot,
        map: {'*': {css: baseRoot + 'plugs/require/css.js'}},
        paths: {
            'md5': ['plugs/jquery/md5.min'],
            'chat': ['plugs/michat/michat'],
            'json': ['plugs/jquery/json.min'],
            'xlsx': ['plugs/jquery/xlsx.min'],
            'excel': ['plugs/jquery/excel.xlsx'],
            'base64': ['plugs/jquery/base64.min'],
            'upload': [tapiRoot + '/api.upload?.js'],
            'angular': ['plugs/angular/angular.min'],
            'echarts': ['plugs/echarts/echarts.min'],
            'ckeditor': ['plugs/ckeditor/ckeditor'],
            'websocket': ['plugs/socket/websocket'],
            'pcasunzips': ['plugs/jquery/pcasunzips'],
            'jquery.ztree': ['plugs/ztree/ztree.all.min'],
            'jquery.masonry': ['plugs/jquery/masonry.min'],
            'jquery.autocompleter': ['plugs/jquery/autocompleter.min'],
        },
        shim: {
            'websocket': {deps: [baseRoot + 'plugs/socket/swfobject.min.js']},
            'jquery.ztree': {deps: ['jquery', 'css!' + baseRoot + 'plugs/ztree/zTreeStyle/zTreeStyle.css']},
            'jquery.autocompleter': {deps: ['jquery', 'css!' + baseRoot + 'plugs/jquery/autocompleter.css']},
        }
    });
</script>