用vue和ts写一个登录功能

在Vue.js和TypeScript中创建一个基本的登录功能，首先需要设置项目结构，并引入必要的依赖。以下是一个简单的步骤说明：

1. **初始化项目**:
使用`vue create your-project-name`命令创建一个新的Vue项目，然后选择使用TypeScript支持。

vue create my-login-app --typescript

2. **安装必要的库**:
安装Vue Router for TypeScript，用于处理路由跳转，以及axios用于发送HTTP请求。

npm install vue-router axios typescript

3. **组件设计**:
创建login.vue文件，使用TypeScript编写。这个组件将包含用户名和密码输入字段、登录按钮和状态显示。

<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="用户名"/>
      <input type="password" v-model="password" placeholder="密码"/>
      <button type="submit">登录</button>
      <p>{{ errorMessage }}</p>
    </form>
  </div>
</template>

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

@Component({
  name: 'Login'
})
export default class LoginComponent extends Vue {
  username = '';
  password = '';
  errorMessage = '';

  login() {
    if (this.username && this.password) {
      // 模拟登录API调用
      fetch('https://api.example.com/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: this.username, password: this.password })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // 登录成功，可以跳转到其他页面
          this.$router.push('/dashboard');
        } else {
          this.errorMessage = data.error;
        }
      })
      .catch(error => {
        console.error('Error:', error);
        this.errorMessage = '登录失败，请检查网络连接';
      });
    }
  }
}
</script>

4. **配置路由**:
在src/router/index.ts中添加路由规则，如登录路径 '/login'.

5. **应用组件**:
将LoginComponent注册到App.vue的components属性里，并使用`v-if`或`v-show`来控制是否显示登录页面。

6. **启动服务**:
运行`npm run serve`启动服务器，打开浏览器访问http://localhost:8080/login即可看到登录界面。