我的vue版本是：20.17.0
一、在HTML中，引用组件格式区别。
vue2引用组件可以是file.vue格式，需要导入：<script src="https://unpkg.com/http-vue-loader"></script>才可以识别vue格式。
vue3引用组件格式是：file.js。
二：vue2引用列子
1、html代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>vue2引用组件例子</title><script type="text/javascript" src="./vue2框架包/vue.js" ></script><script type="text/javascript" src="./vue2框架包/http_vue_loader.js" ></script></head><body><div id="app"><h1>Hello Vue</h1><h1>{{msg}}</h1><testvue/></div><script>var v=new Vue({el:"#app",components:{"testvue": httpVueLoader("./testvue.vue")},data:function(){return{msg:"hello"}}})</script></body>
</html>
2、vue 代码：
<template><div>欢迎您！！{{msg}}</div>
</template><script>module. Exports= {data: function(){return{msg:"child component"}}}
</script>3、页面渲染结果：
三、vue3引用列子
1、html代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>vue3 组件导入</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="app"><h1>Hell Vue3</h1><h1>{{msg}}</h1><test/></div><script type="module">import test from "./testvue.js"const {createApp,ref,watch} = VuecreateApp({components:{test //也可以："test":test},data:function(){return{msg:"hello world"}}}).mount('#app')</script></body>
</html>
2、js代码：
const dd=`
<div>
<h1>wo shi child component</h1>
<h2>{{msg}}</h2>
</div>`export default {data: function () {return {msg: 'child component'}},template: dd
}3、页面渲染结果：
