主要使用到 httpVueLoader，链接地址：unpkg.com/http-vue-lo…
1.单文件中的全局注册
<template>
<div class="home">
<my-header></my-header>
</div>
</template>
<script>
//引入，相当于import
const Header = httpVueLoader('./Header.vue');
//全局注册
Vue.component('my-header', Header);
module.exports = {
data() {
return {
};
}
};
</script>
<style scoped>
.home {
font-size: 24px;
font-weight: bold;
}
</style>
2.单文件中的局部注册
<template>
<div class="home">
<my-header></my-header>
</div>
</template>
<script>
//引入 相当于import
const Header = httpVueLoader('./Header.vue');
module.exports = {
data() {
return {
msg: '主页内容'
};
},
//局部注册
components:{
'my-header':Header
}
};
</script>
<style scoped>
.home {
font-size: 24px;
font-weight: bold;
}
</style>
3.在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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/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" style="text-align: center">
<my-header></my-header>
</div>
<script>
const my-header = httpVueLoader('./Header.vue')
new Vue({
el: '#app',
components: {
my-header
},
});
</script>
</script>
</body>
</html>
