vue制作登录注册界面
时间: 2023-10-05 22:05:42 浏览: 70
首先需要安装 Vue CLI,可以在命令行工具中输入以下命令安装:
```
npm install -g @vue/cli
```
然后创建一个新的 Vue 项目:
```
vue create my-project
```
接下来,我们可以在 `src` 文件夹中创建 `components` 文件夹,并在其中创建 `Login.vue` 和 `Register.vue` 两个组件。
在 `Login.vue` 和 `Register.vue` 中,我们可以使用 Vue 的模板语法和样式来设计登录和注册界面,例如:
```html
<template>
<div class="login">
<h2>{{ title }}</h2>
<form>
<div class="form-group">
<label>Username:</label>
<input type="text" v-model="username" />
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" v-model="password" />
</div>
<button @click.prevent="submit">{{ button }}</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
title: "Login",
username: "",
password: "",
button: "Submit"
};
},
methods: {
submit() {
// 处理表单提交事件
}
}
};
</script>
<style scoped>
.login {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
button {
display: block;
margin-top: 10px;
padding: 5px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
```
在 `Login.vue` 和 `Register.vue` 中,我们可以定义数据和方法来实现登录和注册功能。
最后,在 `App.vue` 中,我们可以使用 `router-link` 和 `router-view` 来实现页面导航和组件切换,例如:
```html
<template>
<div id="app">
<nav>
<router-link to="/login">Login</router-link>
<router-link to="/register">Register</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
nav {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
nav a {
display: inline-block;
padding: 10px;
margin-right: 10px;
text-decoration: none;
color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
}
nav a.active {
background-color: #007bff;
color: #fff;
}
nav a:hover {
background-color: #007bff;
color: #fff;
}
</style>
```
最后,需要在 `main.js` 中引入 `vue-router` 并配置路由,例如:
```javascript
import Vue from "vue";
import App from "./App.vue";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{ path: "/login", component: Login },
{ path: "/register", component: Register }
];
const router = new VueRouter({
routes
});
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
```
这样,我们就完成了一个简单的登录注册界面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)