用vue在VSCode中写一个简单的app

好的，下面是一个用 Vue 编写的简单的 App，它包括一个输入框和一个按钮，点击按钮会弹出一个对话框显示输入框中的内容。

首先，你需要安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

然后在 VSCode 中打开一个空文件夹，执行以下命令创建一个新的 Vue 项目：

vue create my-app

根据提示选择一些基本配置，比如选择默认配置、手动配置等等。

接着，在 VSCode 中打开刚才创建的项目文件夹，编辑 `src/App.vue` 文件，代码如下：

<template>
  <div>
    <input v-model="text" placeholder="请输入内容" />
    <button @click="showDialog">显示内容</button>
    <div v-if="visible" class="dialog">
      {{ text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      visible: false
    };
  },
  methods: {
    showDialog() {
      this.visible = true;
    }
  }
};
</script>

<style>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px #ccc;
}
</style>

这个文件定义了一个 Vue 组件，它包含一个输入框和一个按钮，点击按钮会弹出一个对话框显示输入框中的内容。

最后，在终端中执行以下命令启动开发服务器：

npm run serve

在浏览器中打开 `http://localhost:8080/`，你应该可以看到一个简单的页面，包含一个输入框和一个按钮。输入一些内容，点击按钮，就可以看到一个对话框弹出并显示输入框中的内容了。

以上就是一个简单的 Vue App 的实现过程，希望能对你有所帮助。