用vue3和ts写一个登录功能
时间: 2024-09-29 12:05:31 浏览: 13
在Vue 3中使用TypeScript编写一个简单的登录功能,首先需要安装Vue CLI并配置支持TypeScript。下面是一个基本的步骤和代码示例:
1. **创建项目**:
使用Vue CLI创建一个新的Vue 3 TypeScript项目:
```
vue create my-project --template @vue/cli-template-typescript
```
2. **导航到项目目录**:
```
cd my-project
```
3. **设置组件结构**:
在`src/components`下创建一个Login.vue文件,用于编写登录表单:
```typescript
<template>
<div class="login-form">
<input v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button @click.prevent="submitForm">登录</button>
<p v-if="errorMessage">{{ errorMessage }}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Ref } from 'vue';
@Component({
name: 'Login'
})
export default class Login extends Vue {
// 定义状态变量
username: string = '';
password: string = '';
errorMessage: string | undefined;
// 提交表单方法
submitForm() {
if (this.username === '' || this.password === '') {
this.errorMessage = '用户名或密码不能为空';
} else {
// 这里只是一个示例,实际应用会发送请求到服务器验证
this.errorMessage = '';
this.$emit('form-submitted', this.username);
}
}
}
</script>
```
4. **在父组件中使用**:
在App.vue或其他地方引入Login组件,并监听其提交事件:
```html
<template>
<div id="app">
<Login @form-submitted="handleLogin"></Login>
</div>
</template>
<script lang="ts">
import { ref, onMounted, defineComponent } from 'vue';
import Login from '@/components/Login.vue';
export default defineComponent({
components: {
Login
},
methods: {
handleLogin(username: string) {
// 这里处理登录逻辑,比如跳转、存储用户信息等
console.log(`User ${username} logged in.`);
}
},
setup() {
return {};
}
});
</script>
```