vue前端代码在线生成-vue前端代码生成器

让我们创建一个新的Vue项目：

npm init vue@latest my-project
cd my-project

在src/App.vue文件中添加以下代码：

vue前端代码在线生成-vue前端代码生成器

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Goodbye Vue!";
    }
  }
}
</script>
<style scoped>
/* 添加一些基本样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这段代码定义了一个简单的Vue应用,其中包含一个按钮和一个显示消息的标签，当点击按钮时，会改变消息的内容，这个例子展示了Vue.js的基本概念，如模板、数据绑定和事件处理。

您可以运行您的Vue应用程序：