vue3写一个注册登录页
时间: 2023-03-20 22:03:22 浏览: 63
好的,我来为您讲解如何用Vue3编写一个注册登录页。首先,您需要安装Vue3的开发环境,包括Vue CLI和Vue Router。
1. 创建项目
使用Vue CLI创建一个新的Vue3项目,可以执行以下命令:
```
vue create my-project
```
安装完毕后,进入项目目录并启动本地开发服务器:
```
cd my-project
npm run serve
```
2. 配置路由
使用Vue Router来管理页面路由。在`src/router/index.js`文件中,定义路由如下:
```
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
在`src/views`目录下,创建`Login.vue`和`Register.vue`两个组件,分别对应登录和注册页面。
3. 编写组件
在`Login.vue`和`Register.vue`中,编写模板和逻辑代码来实现登录和注册的功能。以下是一个简单的示例:
```
<template>
<div>
<h1>{{ title }}</h1>
<form>
<label>
Email:
<input type="email" v-model="email">
</label>
<label>
Password:
<input type="password" v-model="password">
</label>
<button type="submit" @click.prevent="submit">{{ button }}</button>
</form>
</div>
</template>
<script>
export default {
name: 'LoginForm',
props: {
title: String,
button: String
},
data() {
return {
email: '',
password: ''
}
},
methods: {
submit() {
// TODO: 实现登录或注册逻辑
console.log(this.email, this.password)
}
}
}
</script>
```
在组件中,使用`v-model`指令将表单元素与组件的数据进行绑定,使用`@click`指令绑定按钮的点击事件,并在方法中实现登录或注册的逻辑。在实际开发中,需要根据具体业务需求实现更完整的逻辑代码。
4. 引入组件和路由
在`App.vue`中,引入组件并使用路由:
```
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
在`main.js`中,引入路由并挂载到Vue实例上:
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
5. 完成
至此,您已经成功地用Vue3编写了一个简单的注册登录