黃聰：不使用 webpack，vuejs 異步加載模板

webpack 打包不會玩，整了這麼個小玩具

 

一段 vue 綁定代碼，關鍵點在 gmallComponent

一、異步加載外部 vue 文件（非 .vue）

二、按必定規則拆分 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(/export\s*=\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);
        });
    };
}