在html5页面中如何使用vue3

今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:

<script src="https://unpkg.com/vue@next"></script>




<script>

const htmls={

data(){

return{

rhtml:"

html页面中引用VUE3的演示页面

",

}

}

}


const app=Vue.createApp(htmls)


// 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称

app.component('props-demo-simple', { data() {

return {

count: 0

}

},

props: ['size', 'myMessage'],template: `

`

}



)

app.mount("#vue")

</script>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的脚本地址. 然后在body下的<script>中书写vue3的代码即可. 下图是运行的结果效果