使用ts和vue生成登录页面

首先需要安装 Vue CLI，可以使用以下命令安装：

npm install -g @vue/cli

然后，使用以下命令创建一个新的 Vue 项目，并选择 TypeScript 作为语言：

vue create my-project

在选择配置的时候，需要选择 `Manually select features`，然后勾选 `TypeScript`，其余的可以根据需要选择。

创建完成后，在 `src` 目录下创建一个名为 `Login.vue` 的文件，并在其中编写以下代码：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" v-model="form.username" />
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" v-model="form.password" />
    </div>
    <button type="submit">登录</button>
  </form>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

interface LoginForm {
  username: string;
  password: string;
}

@Component
export default class Login extends Vue {
  form: LoginForm = { username: '', password: '' };

  handleSubmit() {
    console.log(this.form);
    // 在这里可以进行登录操作
  }
}
</script>

这段代码定义了一个 `Login` 组件，包含一个表单，用于输入用户名和密码。表单的提交事件会调用 `handleSubmit` 函数，这里可以进行登录操作。`form` 则是一个 `LoginForm` 类型的对象，包含用户名和密码。

最后，在其他组件中可以直接引入 `Login` 组件，并将其渲染到页面上。

希望这个示例有帮助！