前端 - 外部插件

后台管理 UI 插件基于 requirejs 进行管理，该技术用于加载和管理 JavaScript 模块。以下是一些简单的使用例子，更详细的用法可以参考官方文档。对于非 AMD/CMD 标准的插件，可以直接使用 script 标签进行加载。 ThinkAdmin 后台的大部分页面都是单页应用程序。为了避免 JavaScript 对象冲突，部分插件需要进行对象销毁。否则，有可能导致插件二次初始化异常。

遵循这些注意事项将帮助您顺利使用 ThinkAdmin 的插件系统，并确保后台管理的稳定性和可靠性。可以参考官方文档将提供的示例，帮助您深入了解和使用这些插件。

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