好的，让我们开始实现
一个登录页面。
首先，我们需要创建
一个Vue 3的工程。可以使用
Vue CLI来创建
一个新的
Vue 3项目：
```
vue create my-project
```
然后，我们需要安装一些其他的依赖项：
```
npm install --save axios
vue-router
```
接下来，我们可以开始编写我们的登录页面。首先，我们需要创建
一个新的组件，它将包含我们的登录表单。我们可以在组件中使用`<template>`标签来定义我们的模板，使用`<script>`标签来定义我们的逻辑，使用`<style>`标签来定义我们的样式。在这里，我们使用TypeScript来编写我们的代码。
```
vue
<template>
<form>
<div>
<label for="username">Username:</label>
<
input type="text" id="username" v-model="username" />
</div>
<div>
<label for="password">Password:</label>
<
input type="password" id="password" v-model="password" />
</div>
<button type="submit" @click.prevent="login">Login</button>
</form>
</template>
<script lang="ts">
import { defineComponent } from '
vue';
import axios from 'axios';
export default defineComponent({
data() {
return {
username: '',
password: '',
};
},
methods: {
async login() {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password,
});
if (response.data.success) {
// 登录成功，跳转到首页
this.$router.push('/');
} else {
// 登录失败，显示错误信息
alert(response.data.error);
}
},
},
});
</script>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
}
div {
margin: 10px 0;
}
label {
display: block;
margin-bottom: 5px;
}
</style>
```
在这个组件中，我们定义了两个数据属性`username`和`password`，它们将分别绑定到我们的用户名和密码
输入框上。我们还定义了
一个`login`方法，它将使用Axios来向服务器发送登录请求，并在服务器返回成功时将用户重定向到首页。如果登录失败，我们将显示
一个警告
框，显示错误信息。
接下来，我们需要在我们的
Vue Router中定义
一个路由，以便我们可以在浏览器中访问我们的登录页面。在`src/router/index.ts`文件中，我们可以
添加以下代码：
```ts
import { createRouter, createWebHistory } from '
vue-router';
import Login from '@/views/Login.
vue';
const routes = [
{
path: '/login',
name: 'Login',
component: Login,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
在这里，我们定义了
一个名为`Login`的路由，它将渲染我们之前定义的`Login`组件。我们还使用`createWebHistory`函数来创建
一个HTML5历史记录路由，以便我们可以使用浏览器的前进和后退按钮进行导航。
最后，我们需要在我们的入口文件中将
Vue Router
添加到我们的应用程序中。在`src/main.ts`文件中，我们可以
添加以下代码：
```ts
import { createApp } from '
vue';
import App from './App.
vue';
import router from './router';
createApp(App).use(router).mount('#app');
```
在这里，我们使用`createApp`函数创建
一个Vue实例，并将我们的
Vue Router
添加到这个实例中。然后，我们将这个实例挂载到`#app`元素上。
现在我们已经完成了我们的登录页面。我们可以使用`npm run serve`命令来启动我们的开发服务器，并在浏览器中访问`http://localhost:8080/login`来查看我们的登录页面。
4319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
