vue2和vue3在html中引用组件component方式不一样

我的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
}