Html利用Vue动态加载单文件页面【httpVueLoader】

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>