vue3和cli实现登录 代码示例
时间: 2023-12-03 18:53:07 浏览: 26
好的,让我想一想...
以下是一个使用 Vue 3 和 Vue CLI 实现登录的代码示例:
1. 在命令行中使用 Vue CLI 创建一个新项目:
```
vue create my-login-app
```
2. 安装所需的依赖项:
```
cd my-login-app
npm install axios vue-router
```
3. 在 src/main.js 文件中引入必要的依赖项:
```javascript
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.prototype.$axios = axios
const routes = [
{ path: '/', component: App }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
4. 在 App.vue 文件中实现登录逻辑:
```html
<template>
<div>
<h1>登录页</h1>
<form @submit.prevent="login">
<div>
<label for="username">用户名:</label>
<input id="username" v-model="username" type="text">
</div>
<div>
<label for="password">密码:</label>
<input id="password" v-model="password" type="password">
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
errorMessage: '',
}
},
methods: {
async login() {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password,
})
if (response.status === 200) {
this.$router.push('/dashboard')
} else {
this.errorMessage = '用户名或密码错误'
}
}
},
}
</script>
```
在实际使用时,你需要将上面的代码改成符合你的后端 API 接口。不要忘记在 package.json 文件中配置一下代理,以便在开发模式下使用真实的 API 接口。
```
{
...,
"devServer": {
"proxy": {
"/api": {
"target": "http://localhost:3000",
"changeOrigin": true
}
}
}
}
```
这就是一个使用 Vue 3 和 Vue CLI 实现登录的简单示例。如果你还有什么问题,我会尽力回答的。