vue3怎么分离ts文件（或怎么把vue3的ts文件单独分离出来），以登录页面为例

在Vue 3中，你可以将TypeScript单独放置在.ts文件中，并在Vue组件中导入它们。以下是一个简单的例子，展示如何为登录页面创建一个TypeScript模块，并在Vue组件中使用它。

首先，创建一个TypeScript模块文件login.ts：

// login.ts
interface LoginForm {
  username: string;
  password: string;
}
 
interface LoginResponse {
  userId: string;
  token: string;
}
 
class LoginService {
  login(form: LoginForm): Promise<LoginResponse> {
    // 模拟登录请求
    return fetch('api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    }).then(response => response.json());
  }
}
 
export const loginService = new LoginService();

然后，在Vue组件中导入并使用这个模块：

// LoginPage.vue
<template>
  <div>
    <input v-model="form.username" type="text" placeholder="Username" />
    <input v-model="form.password" type="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { loginService } from './login';
import type { LoginForm, LoginResponse } from './login';
 
export default defineComponent({
  setup() {
    const form = reactive<LoginForm>({ username: '', password: '' });
 
    const login = async () => {
      try {
        const response = await loginService.login(form);
        // 处理登录成功的响应
        console.log(response);
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    };
 
    return { form, login };
  },
});
</script>

在这个例子中，login.ts是一个TypeScript模块，定义了登录表单的接口和登录服务类。在Vue组件中，我们导入了这个模块并使用了它的loginService实例来处理登录逻辑。这样，你就可以将业务逻辑放在单独的TypeScript文件中，使得Vue组件的逻辑更为清晰和模块化。