vue3和vue2的结构对比

写有注释的地方就是变化的地方

1、main.js

// 引入的不在时Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象--app(类似于之前的Vue2中的vm,但app比vm更轻)
const app = createApp(App)
console.log('@@@',app)
// 挂载
app.mount('#app')
// createApp(App).mount('#app')

// vue2:
// const vm = new Vue({
//     render: h => h(App)
// })
// vm.$mount('#app')

2、组件

<template>
<!-- vue3的组件中的模板结构可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>

</style>