文章目录
1、 首先页面引入vue、http-vue-loader
<script src="./assets/js/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
2、 利用httpVueLoader加载指定页面
<div id="app">
<addressComponent ></addressComponent>
</div>
<script>
var addressComponent = httpVueLoader('./file.vue');
var app = new Vue({
el: '#app',
components: {
addressComponent,
},
})
</script>
3、利用httpVueLoader加载的文件【file.vue】
3.1 js module.export导出
注意：httpVueLoader加载的单文件导出方式不同：module.exports = {}，而不是export default {}
<template>
<div>{{title}}</div>
</template>
<script>
module.exports = {
data(){
return {
title: "动态页面"
}
},
}
</script>
3.2 通过 import 加载外部JS
<script>
module.exports = {
data(){
return {
title: "动态页面"
}
},
async mounted(){
const fn = await import('./js/file-fn.js');
fn.fileFn(); //123
}
}
</script>
// file-fn.js
export function fileFn() {
console.log(123);
}
4、httpVueLoader：组件的全局注册和局部注册
4.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>
4.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>
