vue3 + vite完成登录页面并设计样式
时间: 2023-12-22 21:04:44 浏览: 24
好的,我们可以先使用 Vue3 和 Vite 搭建一个简单的登录页面,并为其设计样式。首先,我们需要安装 Vue CLI 和 Vite:
```bash
npm install -g @vue/cli
npm install -g vite
```
接下来,我们可以使用 Vue CLI 快速创建一个 Vue3 项目:
```bash
vue create login-page
```
然后,进入项目目录并安装 Element Plus,这是一个基于 Vue3 的 UI 组件库:
```bash
cd login-page
npm install element-plus --save
```
接着,我们可以在 `src/main.js` 中引入 Element Plus 的样式和组件:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
```
现在,我们可以在 `App.vue` 中编写登录页面的 HTML 和样式了:
```html
<template>
<div class="login-container">
<el-form class="login-form" :model="form">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formLabelWidth: '80px',
form: {
username: '',
password: ''
}
}
},
methods: {
login() {
// TODO: 登录逻辑
}
}
}
</script>
<style scoped>
.login-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-form {
width: 400px;
}
</style>
```
以上代码中,我们使用 Element Plus 的组件来构建登录表单,使用了 flex 布局使其居中显示。
最后,我们可以使用 Vite 运行项目:
```bash
vite
```
现在,我们就完成了一个简单的登录页面,并为其设计了样式。