我知道，使用单页的情况下，调用组件是很简单的。但在通过使用Angular和Vue半年来，发觉单页的程序在我们的应用场景下，存在诸多不便。
我们的项目要与其它人的项目进行集成，有可能是单页，也有可能是非单页，要共享部分样式或实现单点登陆太困难了。
所以我接下来的项目会尝试非单页应用。
其中一个需要解决的就是静态文件中许多组件的复用问题。研究了一个晚上。
发觉可以用jquery的load来解决这个问题。
我把某个组件的template放在一个html文件里。
主文件用 load调用
例子如下：
<html lang="en">
<head>
<script src="https://code.jquery.com/jquer...; integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/...;></script>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
<div id="template">
</div>
<script>
Vue.component('mycom1', { template: '<div></div>' })
$(document).ready(function () {
$('#template').load('b.html', function () {
Vue.component('mycom1', combb)
vm.$forceUpdate()
});
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
组件html:
<template id="hello-world-template">
<div id="components-demo">
hello-world-template
</div>
</template>
<script>
var combb = Vue.extend({
template: '#hello-world-template' // 通过 template 属性，指定了组件要展示的HTML结构
})
</script>
最后用 vm.$forceUpdate() 来更新部分实例。
如有疑问，请给我留言。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。