基于vue3 ts 实现一个登录页面

好的，让我们开始实现一个登录页面。

首先，我们需要创建一个Vue 3的工程。可以使用Vue CLI来创建一个新的Vue 3项目：

vue create my-project

然后，我们需要安装一些其他的依赖项：

npm install --save axios vue-router

接下来，我们可以开始编写我们的登录页面。首先，我们需要创建一个新的组件，它将包含我们的登录表单。我们可以在组件中使用`<template>`标签来定义我们的模板，使用`<script>`标签来定义我们的逻辑，使用`<style>`标签来定义我们的样式。在这里，我们使用TypeScript来编写我们的代码。

<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`文件中，我们可以添加以下代码：

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`文件中，我们可以添加以下代码：

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`来查看我们的登录页面。