黄聪:不使用 webpack,vuejs 异步加载模板

时间:2022-08-27 13:25:12

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

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

1、异步加载外部 vue 文件(非 .vue)

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

黄聪:不使用 webpack,vuejs 异步加载模板
new Vue({
el: '#app_vuejs_replace',
data: {
search_key : '',
results : [],
pageindex : 1,
selecteditem : null
},
components: {
'vue-test': gmallComponent('gz/test.html', {
props: ['items']
})
}
});
黄聪:不使用 webpack,vuejs 异步加载模板

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

黄聪:不使用 webpack,vuejs 异步加载模板
<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>
黄聪:不使用 webpack,vuejs 异步加载模板

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

黄聪:不使用 webpack,vuejs 异步加载模板
<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);
});
};
}
黄聪:不使用 webpack,vuejs 异步加载模板