黄聪：不使用 webpack，vuejs 异步加载模板

Posted 2020-11-13 黄聪

webpack 打包不会玩，整了这么个小玩具

 

一段 vue 绑定代码，关键点在 gmallComponent

1、异步加载外部 vue 文件（非 .vue）

2、按一定规则拆分 template、script、style

new Vue({
    el: ‘#app_vuejs_replace‘,
    data: {
        search_key : ‘‘,
        results : [],
        pageindex : 1,
        selecteditem : null
    },
    components: {
        ‘vue-test‘: gmallComponent(‘gz/test.html‘, {
            props: [‘items‘]
        })
    }
});

 

gz/test.html 使用习惯几乎遵循 vue 原生，定义模板、脚本、样式

<div>
    <div>I am async!</div>
    <div v-for="item in items" @click="onclick(item.company_name)">
        {{item.web_title}}
    </div>
</div>

<script>
export = {
    methods: {
        onclick: function(msg) {
            showTip(msg);
        }
    }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
    transition: opacity .9s
}
.fade-enter, .fade-leave-active {
    opacity: 0
}
</style>

 

将以下代码定义到公共 .js 文件中

<script type="text/javascript">
function gmallComponent(url, vuecom) {
    if (!vuecom) vuecom = {};
    return function(resolve, reject) {
        $.get(url).done(function(r) {
            var rl = r.toLowerCase();
            var style = ‘‘;
            var styleIndexEnd = rl.lastIndexOf(‘</style>‘);
            var styleIndex = rl.lastIndexOf(‘<style‘, styleIndexEnd);
            if (styleIndexEnd !== -1 && styleIndex !== -1) {
                style = r.substring(styleIndex, styleIndexEnd);
                style = style.substr(style.indexOf(‘>‘) + 1);
                style = ‘<component scoped :is="‘style‘">‘ + style + ‘</component>‘;
            }

            var scriptIndexEnd = rl.lastIndexOf(‘</script>‘);
            var scriptIndex = rl.lastIndexOf(‘<script‘, scriptIndexEnd);
            if (scriptIndexEnd !== -1 && scriptIndex !== -1) {
                var script = r.substring(scriptIndex, scriptIndexEnd);
                script = script.substr(script.indexOf(‘>‘) + 1);
                script = ‘(‘ + script.replace(/exports*=s*{/i, ‘{‘) + ‘)‘;
                var obj = eval(script);
                for (var a in obj) vuecom[a] = obj[a];
            }
            var template = r.substring(0, Math.min(styleIndex, scriptIndex));
            if (style) {
                var index = template.lastIndexOf(‘</‘);
                if (index !== -1) template = template.substr(0, index) + style + template.substr(index);
            }
            vuecom.template = template;
            debugger
            resolve(vuecom);
        });
    };
}