idea vue开发

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

// App.vue
<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明

1. main.js:

   • 这是Vue应用的入口文件。
   • 使用createApp函数创建一个Vue应用实例，并挂载到HTML中的#app元素上。

2. App.vue:

   • 这是一个单文件组件（SFC），包含模板、脚本和样式三个部分。
   • 模板部分定义了页面的结构，包括一个标题和一个按钮。
   • 脚本部分定义了组件的数据和方法。data函数返回一个对象，包含组件的状态（如message和count）。methods定义了组件的方法，例如increment方法用于增加计数器。
   • 样式部分定义了组件的样式，使页面看起来更美观。

这个示例展示了如何使用Vue 3创建一个简单的计数器应用。