vue3 + vite完成登录页面demo
时间: 2023-12-10 17:04:26 浏览: 58
好的,以下是一个使用Vue 3和Vite构建的登录页面示例:
1. 首先安装Vue 3和Vite:
```bash
npm install vue@next vite -g
```
2. 创建项目文件夹并进入:
```bash
mkdir login-page-demo
cd login-page-demo
```
3. 在项目文件夹下初始化Vite:
```bash
vite init
```
在初始化过程中选择Vue 3作为框架。
4. 进入项目文件夹,打开src/main.js文件,修改代码如下:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
```
5. 在src文件夹下创建App.vue文件,代码如下:
```html
<template>
<div class="container">
<h1>Login Page</h1>
<form>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" v-model="username" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" v-model="password" />
</div>
<button type="submit" @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
}
},
methods: {
login() {
// 在这里写登录逻辑
console.log('用户名:' + this.username)
console.log('密码:' + this.password)
}
},
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
input {
padding: 0.5rem;
font-size: 1rem;
margin-bottom: 1rem;
}
button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
```
6. 运行项目:
```bash
npm run dev
```
在浏览器中打开http://localhost:3000/,即可看到登录页面。
这是一个简单的示例,具体的登录逻辑需要根据实际需求进行编写。