Iview组件Loader, vue组件Loader，IView Loader, Vue组件重新命名 适用于AMD代码风格

之前在写项目， 使用IView做主要UI， 但是默认的名称不统一， 让人非常不堪， 研究了官方的IViewLoader， 但是发现只适用ES环境，

我的项目是ASp.Net MVC + RequireJs + Iview + VueJs ,即前后端一体，非ES环境， 所以仔细研究了IVIew的结构，终于写出了自己的VueLoader，

为什么我会说VueLoader， 难道适用于所有Vue组件？

对：没有错。只要UI库导出的模块是一个组件集合或数组， 都可以使用。

什么是AMD代码， 直接上实例：

define(['iview', 'xxx'], function (iview, xxx) {
    "use strict";//使用严格模式

//AMD模块特性： 按需加载， 如iview, xxx(更多), 这些文件从哪里获取后面再说

...

//要返回的对象， 也表示此返回的模块本身，提供RequireJs或其他AMD模块按需加载，
//更多请上网查
return {
...
}
})

实现思路：如果Debug一下， 你会发现Iview模块是一个组件集合(不是数组, 如Button:{..}, Input:{..}, ..)，

所以我们如果要自定义自己的组件名， 为何不遍历此集合里的所有组件， 然后根据我们需要的，拷贝组件对象到一个新的另起名称的组件对象， 最后注册到Vue对象

上述主要有两个文件， 一个ComponentsMap.js（新组件匹配到旧组件）， ComponentsLoader.js（组件加载器）

依赖：Jquery, Iview

ComponentsMap.js

define([], function () {
    // 使用严格模式
    'use strict';

    return {
        "Circle": "MyCircle",
        "Switch": "MySwitch",
        "Affix": "MyAffix",
        "Alert": "MyAlert",
        "Anchor": "MyAnchor",
        "AnchorLink": "MyAnchorLink",
        "AutoComplete": "MyAutoComplete",
        "Avatar": "MyAvatar",
        "BackTop": "MyBackTop",
        "Badge": "MyBadge",
        "Breadcrumb": "MyBreadcrumb",
        "BreadcrumbItem": "MyBreadcrumbItem",
        "Button": "MyButton",
        "ButtonGroup": "MyButtonGroup",
        "Card": "MyCard",
        "Carousel": "MyCarousel",
        "CarouselItem": "MyCarouselItem",
        "Cascader": "MyCascader",
        "Cell": "MyCell",
        "CellGroup": "MyCellGroup",
        "Checkbox": "MyCheckbox",
        "CheckboxGroup": "MyCheckboxGroup",
        "Col": "MyCol",
        "Collapse": "MyCollapse",
        "ColorPicker": "MyColorPicker",
        "Content": "MyContent",
        "DatePicker": "MyDatePicker",
        "Divider": "MyDivider",
        "Drawer": "MyDrawer",
        "Dropdown": "MyDropdown",
        "DropdownItem": "MyDropdownItem",
        "DropdownMenu": "MyDropdownMenu",
        "Footer": "MyFooter",
        "Form": "MyForm",
        "FormItem": "MyFormItem",
        "Header": "MyHeader",
        "Icon": "MyIcon",
        "Input": "MyInput",
        "InputNumber": "MyInputNumber",
        "Scroll": "MyScroll",
        "Sider": "MySider",
        "Split": "MySplit",
        "Submenu": "MySubmenu",
        "Layout": "MyLayout",
        "LoadingBar": "MyLoadingBar",
        "Menu": "MyMenu",
        "MenuGroup": "MyMenuGroup",
        "MenuItem": "MyMenuItem",
        "Message": "MyMessage",
        "Modal": "MyModal",
        "Notice": "MyNotice",
        "Option": "MyOption",
        "OptionGroup": "MyOptionGroup",
        "Page": "MyPage",
        "Panel": "MyPanel",
        "Poptip": "MyPoptip",
        "Progress": "MyProgress",
        "Radio": "MyRadio",
        "RadioGroup": "MyRadioGroup",
        "Rate": "MyRate",
        "Row": "MyRow",
        "Select": "MySelect",
        "Slider": "MySlider",
        "Spin": "MySpin",
        "Step": "MyStep",
        "Steps": "MySteps",
        "Table": "MyTable",
        "Tabs": "MyTabs",
        "TabPane": "MyTabPane",
        "Tag": "MyTag",
        "Time": "MyTime",
        "Timeline": "MyTimeline",
        "TimelineItem": "MyTimelineItem",
        "TimePicker": "MyTimePicker",
        "Tooltip": "MyTooltip",
        "Transfer": "MyTransfer",
        "Tree": "MyTree",
        "Upload": "MyUpload"


    }
});

ComponentsLoader.js

define(['ComponentsMap', 'iview'], function (ComponentsMap, iview) {
    // 使用严格模式
    'use strict';

    var lo_configs = [];
    for (var key in iview) {
        var ls_match_key = ComponentsMap[key] || '';
        if (ls_match_key) {
            lo_configs[ls_match_key] = $.extend(true, {}, iview[key]);
        }
    }

    return {
        install(Vue) {
            for (var key in lo_configs) {
                Vue.component(key, lo_configs[key]);
            }
        }
    }
});

使用这些代码前， 你还必须先配置RequireJs的config, 这里创建一个main.js文件:

//配置模块
require.config({
    waitSeconds: 99999,
    baseUrl: './',
    paths: {
        'jquery': '/Scripts/jquery-1.10.2.min.js',
        'iview': '/Scripts/IView/iview',
        'vue': '/Scripts/vue.min',
        //...这里一些无关的代码， 我已经删除

        //控件自定义Loader
        'ComponentsMap': '/Scripts/Base/ComponentsMap',
        'ComponentsLoader': '/Scripts/Base/ComponentsLoader',

        
    },
    shim: {//非AMD模块， 要在这里包装成AMD，并定义导出模块
        'jqueryforval': {
            exports: 'jquery'
        },
        'vue':{
            exports: 'Vue'
        },
        'iview': {
            exports: 'iview',
            deps: ['css!/Content/Iview/iview.css','css!/Content/Iview/iviewplus.css', 'vue']
        }
       
    },
    map: {
        '*': {
            css: '/scripts/css.min.js'
        }
    }

    加上时间戳
    //,urlArgs: "bust=" + (new Date()).getTime()

});

在Html里写入这段：

<Header> ... <script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/scripts/require.js" data-main="/Scripts/Base/main"></script> .... <header> <Body> ... <!--myapp全名myapp.js（注意， 此文件必须是AMD模块， 参考上面写法）， 可以省略后缀， 这里去构建Vue实例， 即New Vue({data: {}, ..., mounted: function(){Vue.Use(ComponentsLoader) } })---> <script>$(document).ready(function() {require(['../../Scripts/App/Home/mpapp']);});</script> <Body>

应用实例：

注意使用遵循驼峰命名法， 如匹配的组件是MyButton， 则Html元素是My-Button

 <div style="border:1px solid #0094ff;height:300px;">
            自定义组件Loader
            <My-Button type="primary" shape="circle" icon="ios-search">按钮</My-Button>
            <My-Input></My-Input>
            <My-Radio >Radio</My-Radio>
        </div>

最终的样

子：

QQ: 1400761237， 有疑问请联系我

作者留言：

写出这些功能， 确实花了不少时间和精力去琢磨IView，同时也学到不少东西， 大家的支持， 也是创作者的重要动力之一，如果觉得不错， 也请多多支持，

挥动您发财的大手， 扫一下这个二维码， 支持一下， 谢谢！