废话不多说，直接上代码！
需要创建两个文件：side.vue、index.html
side.vue 文件内容
<template>
<div>这个是 {{pageName}} 页面</div>
</template>
<script>
module.exports = {
data: function() {
return {
pageName: 'Side.vue'
}
}
}
</script>
<style scoped>
</style>
index.html 文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="shortcut icon" href="#"/>
<!-- Vue -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<side></side>
</div>
<script>
new Vue({
el: "#app",
/* 引用 vue 文件为组件*/
components: {
'side': httpVueLoader('side.vue')
}
})
</script>
</body>
</html>
我在 HBuilder 里的执行效果
注意不能直接以本地打开方式进行查看，因为没有效果，必须以网络形式进行查看！ 你可以下载 HBuilder 软件在他的内置浏览器里进行查看，这个是以网络地址的形式进行查看的，不会出现跨域请求的问题。
相关参考：
推荐阅读：
1534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
