请扮演一个前端程序员,用vue3写一页小程序的登录页面
时间: 2024-04-15 12:31:17 浏览: 22
当然可以!我可以帮你用 Vue 3 编写一个简单的登录页面。首先,我们需要创建一个 Vue 3 项目并安装相应的依赖。
1. 创建一个新的 Vue 3 项目:
```
vue create login-page
```
2. 进入项目目录:
```
cd login-page
```
3. 安装 Vue Router 和 Element Plus(一个基于 Element UI 的组件库):
```
npm install vue-router@next element-plus
```
4. 在项目根目录下创建一个新的文件夹 `src/views`,并在该文件夹下创建一个名为 `Login.vue` 的文件,用于编写登录页面的代码。
在 `Login.vue` 文件中,我们可以编写如下代码:
```vue
<template>
<div class="login">
<el-input v-model="username" placeholder="请输入用户名"></el-input>
<el-input v-model="password" placeholder="请输入密码" type="password"></el-input>
<el-button @click="login">登录</el-button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
// 在这里编写登录逻辑
if (this.username === 'admin' && this.password === '123456') {
alert('登录成功');
} else {
alert('用户名或密码错误');
}
}
}
};
</script>
<style scoped>
.login {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
</style>
```
这段代码中,我们使用了 Element Plus 提供的 `el-input` 和 `el-button` 组件来创建输入框和登录按钮。在 `data` 中定义了 `username` 和 `password` 两个变量,通过 `v-model` 实现双向数据绑定。在 `login` 方法中,我们可以编写具体的登录逻辑,这里只是简单地判断用户名和密码是否为预设的值。
5. 修改 `src/main.js` 文件,配置 Vue Router 和引入 Element Plus:
```js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
import Login from './views/Login.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Login }
]
});
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');
```
6. 在项目根目录下的 `src/App.vue` 文件中,添加一个占位符 `<router-view />`:
```vue
<template>
<router-view />
</template>
```
7. 运行项目:
```
npm run serve
```
现在,你可以在浏览器中访问 `http://localhost:8080` 来查看登录页面了。输入预设的用户名和密码,点击登录按钮即可触发登录逻辑。
这只是一个简单的示例,你可以根据实际需求进行扩展和优化。希望对你有帮助!如果有任何问题,欢迎随时提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)