Vue-template组件开发

使用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页面，结果如下，模板已经完全引入了。