原生html使用 vue 组件

以下纯个人理解 欢迎 大佬指正
1.【vue 2.0】
http-vue-loader.js
原生html需要引入以上js
// 使用httpVueLoader

Vue.use(httpVueLoader);
new Vue({
    el: '#app',
    data: function () {
        return { visible: false }
    },
    components: {
        // 将组建加入组建库
        'my-component': 'url:./component/my-component.vue'
    }
})

2.【vue 3.0】
组件的理解可以在各个js中 当函数使用
function fun1(id){
const Counter = {
data() {
return {
counter: "反转字符"
}
},
components:{
// "button-counter":app1
},
mounted(){
this.changeData();

    },
    methods:{
        changeData(){//更新data
            setTimeout(()=>{
                    this.counter = "更新"
            },3000)
        },
        reverseMessage(){
            this.counter = this.counter.split("").reverse().join("")
        }
    }
}
Vue.createApp(Counter).mount("#"+id);

}