Ant Design和TypeScript创建一个登录注册页面

接下来将使用Vue 3、Ant Design和TypeScript创建一个登录注册页面。

步骤1：设置项目 首先，请确保你的计算机已安装了Node.js和Vue CLI。如果没有，请先安装它们。

使用Vue CLI创建一个新的Vue项目，并选择TypeScript作为语言。

vue create login-register-app
cd login-register-app

bash复制代码

接下来，我们需要安装ant-design-vue和vue-router依赖。

npm install ant-design-vue@next vue-router@next

bash复制代码

步骤2：创建页面和组件 我们将创建两个页面：登录页面和注册页面。每个页面都将有一个表单用于用户输入登录或注册信息。

首先，在src/views目录下创建一个LoginPage.vue文件。

<template>
  <a-card title="登录">
    <a-form :form="form" @finish="handleLogin">
      <a-form-item label="用户名" name="username" rules="[{ required: true, message: '请输入用户名' }]">
        <a-input v-model:value="loginForm.username" />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const form = ref<any>(null)

const loginForm = ref({
  username: '',
  password: ''
})
</script>

在以上代码中，我们使用了Ant Design的Card和Form组件来创建一个登录表单。表单包含用户名和密码字段，以及一个登录按钮。

然后，我们创建一个RegisterPage.vue文件，其中包含类似的代码。只是这次，我们将创建一个注册表单，包含用户名、密码和确认密码字段。

步骤3：设置路由 我们需要设置路由来实现页面间的导航。

在src/router目录下创建一个index.ts文件，并添加以下代码。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import LoginPage from '../views/LoginPage.vue'
import RegisterPage from '../views/RegisterPage.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: LoginPage
  },
  {
    path: '/register',
    component: RegisterPage
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

typescript复制代码

然后，在src/main.ts文件中添加以下代码以使用路由。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

typescript复制代码

步骤4：创建App组件 最后，我们需要创建一个App组件作为我们应用程序的入口点。

在src目录下创建一个App.vue文件，并添加以下代码。

<template>
  <router-view></router-view>
</template>

html复制代码

步骤5：编译和运行 现在，我们已经完成了所有的代码编写。我们可以使用以下命令来编译和运行我们的应用程序。

npm run serve

bash复制代码

然后在浏览器中打开http://localhost:8080，你将看到登录页面。你可以点击导航栏上的链接来切换到注册页面。