在vscode中用vue写一个简单登录页面

首先，你需要在你的电脑上安装好 Vue 和 VS Code。如果你还没有安装，可以参考 Vue 官网和 VS Code 官网进行安装。

接下来，我们可以创建一个新的 Vue 项目。在终端中运行以下命令：

vue create my-project

这个命令会创建一个名为 my-project 的 Vue 项目。等待一段时间后，我们可以进入项目目录并启动开发服务器：

cd my-project
npm run serve

现在，我们可以在 VS Code 中打开该项目，开始写一个登录页面。我们可以在 src 目录下创建一个新的组件文件，例如 Login.vue：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="login">
      <label>Username:</label>
      <input type="text" v-model="username" required>
      <br>
      <label>Password:</label>
      <input type="password" v-model="password" required>
      <br>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      // TODO: 实现登录逻辑
    },
  },
}
</script>

这个组件会渲染一个包含用户名、密码输入框和登录按钮的表单，并且定义了一个 login 方法，但是还没有实现具体的登录逻辑。

接下来，我们可以在 App.vue 中引入 Login 组件，并在 template 中使用它：

<template>
  <div id="app">
    <Login />
  </div>
</template>

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

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

这样，我们就可以在浏览器中访问 http://localhost:8080，就能看到我们刚刚写的登录页面了。