vue3 create

// 使用 Vue 3 创建一个简单的应用

// 引入 Vue 和创建应用的函数
import { createApp } from 'vue';

// 定义一个简单的组件
const App = {
  // 模板字符串，定义组件的 HTML 结构
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="increment">Count is: {{ count }}</button>
    </div>
  `,
  // 组件的数据
  data() {
    return {
      message: 'Hello Vue 3!',
      count: 0
    };
  },
  // 方法
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 创建 Vue 应用实例，并挂载到 DOM 中的 #app 元素
createApp(App).mount('#app');

解释说明：

1. 引入 Vue 和创建应用的函数：import { createApp } from 'vue'; 这行代码从 Vue 包中导入了 createApp 函数，它是 Vue 3 中创建应用实例的主要方法。
2. 定义组件：const App = {...} 定义了一个名为 App 的组件，它包含模板、数据和方法。模板使用了双大括号语法 {{ }} 来绑定数据，并且通过事件绑定 @click 来处理按钮点击事件。
3. 创建并挂载应用：createApp(App).mount('#app'); 创建了一个 Vue 应用实例，并将其挂载到页面中具有 id="app" 的 DOM 元素上。

这段代码展示了如何使用 Vue 3 创建一个简单的单文件组件，并将其挂载到页面上。