用 vue3创建一个登录页面
时间: 2023-11-16 19:00:09 浏览: 574
要用Vue3创建一个登录页面,需要进行以下步骤:
- 创建一个Vue项目并安装Vue Router。
- 在src目录下创建一个Login.vue文件,并在其中编写登录页面的HTML和CSS代码。
- 在Login.vue文件中添加Vue组件的JavaScript代码,包括data、methods和computed等选项。
- 在router目录下的index.js文件中设置初始页面为登录页面。
- 在main.js文件中引入Vue和Vue Router,并创建Vue实例并挂载到HTML页面上。
具体步骤如下:
- 创建一个Vue项目并安装Vue Router。
vue create my-project
cd my-project
npm install vue-router
- 在src目录下创建一个Login.vue文件,并在其中编写登录页面的HTML和CSS代码。
<template>
<div class="login">
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" v-model="username">
<label for="password">Password:</label>
<input type="password" id="password" v-model="password">
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<style>
.login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
margin-bottom: 1rem;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
label {
margin-bottom: 0.5rem;
}
input {
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
max-width: 300px;
}
button {
padding: 0.5rem 1rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
- 在Login.vue文件中添加Vue组件的JavaScript代码,包括data、methods和computed等选项。
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 实现登录逻辑
}
}
}
</script>
- 在router目录下的index.js文件中设置初始页面为登录页面。
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
- 在main.js文件中引入Vue和Vue Router,并创建Vue实例并挂载到HTML页面上。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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://img-home.csdnimg.cn/images/20241231044955.png)