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

文章目录

1、 首先页面引入vue、http-vue-loader

html 复制代码
  <script src="./assets/js/vue.min.js"></script>
  <script src="https://unpkg.com/http-vue-loader"></script>

2、 利用httpVueLoader加载指定页面

html 复制代码
<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 {}

html 复制代码
<template>
    <div>{{title}}</div>
</template>
<script>
module.exports = {
    data(){
        return {
            title: "动态页面"
        }
    },
}
</script>

3.2 通过 import 加载外部JS

javascript 复制代码
<script>
module.exports = {
    data(){
        return {
            title: "动态页面"
        }
    },
    async mounted(){
        const fn = await import('./js/file-fn.js');
        fn.fileFn(); //123
    }
}
</script>
javascript 复制代码
// file-fn.js
export function fileFn() {
	console.log(123);
}

4、httpVueLoader:组件的全局注册和局部注册

4.1、全局注册

html 复制代码
<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、局部注册

html 复制代码
<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>
相关推荐
孤水寒月1 分钟前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀10 分钟前
html初学者第一天
前端·html
脑袋大大的1 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络3 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way3 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689974 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript