使用vue进行开发的时候，可以将页面的一个个模块封装成一个个组件，便于模块的复用和管理，最为常见的就是将头部或者底部封装为一个页面，然后在其他页面中引入即可。
首先先创建一个my-template.vue模板vue文件。
<template>
<div>
您好，我是Vue模块组件
</div>
</template>
【注意】在template标签下，只能有一个根标签。即在template下只能有一个div或者其他标签，不能有其他标签与div为同级标签。
创建另外一个index.html文件，在文件中引入该模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--这里需要引入三个和vue相关的js文件，也可以将这三个文件下载下来，在本地引用-->
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!--最外面的div，id为app，需要被vue管理的范围-->
<div id="app">
<!--这里写一个模板，模板名字自定义-->
<hello></hello>
</div>
<script type="text/javascript">
<!--vue使用httpVueLoader-->
Vue.use(httpVueLoader);
const app = new Vue({
<!--使用id选择器，表示被vue管理的范围-->
el: "#app",
components: {
<!--给自己自定义的模板选择资源路径-->
'hello': 'url:./my-template.vue',
},
});
</script>
</body>
</html>
访问index.html页面，结果如下，模板已经完全引入了。
