抽离公共部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html抽离公共代码的相关方法 -->
<!-- 1.jq项目利用load方法 -->
<!-- csdn相关链接:https://blog.csdn.net/rfalcon/article/details/113931812 -->
<!-- <div class="main"></div>
<script src="./jquery-3.5.1.min.js"></script>
<script src="./demo.js"></script> -->
<!-- 2.es6的embed标签 -->
<!-- <embed src="test.html" type="text/html"> -->
<!-- 3.使用object -->
<object style="border:0px" type="text/x-scriptlet" data="test.html" width=100% height=auto></object>
</body>
</html>
html中引入vue组件
http-vue-loader:js下载地址
使用:使用介绍
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<script src="./httpVueLoader.js"></script>
</head>
<body>
<div class="" id="app">
<vue-demo></vue-demo>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
'vue-demo': httpVueLoader('child.vue')
}
})
// 2.第二种引入方法
Vue.use(httpVueLoader)
var vm = new Vue({
el: '#app',
components: {
'vue-demo': 'url:./child.vue'
}
})
</script>
</body>
</html>
vue组件
<template>
<h2>hello vue.js</h2>
</template>
报错截图
处理
phpstudy软件,开一个本地服务器,都放进去
解决效果: