vue3.0和cli脚手架实现登录 代码示例

好的，以下是Vue 3.0和CLI脚手架实现登录的代码示例：

1. 在Vue 3.0项目中创建一个名为“Login”的组件，代码如下：

<template>
  <div>
    <h2>登录</h2>

    <label>用户名:</label>
    <input type="text" v-model="username">

    <label>密码:</label>
    <input type="password" v-model="password">

    <button v-on:click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在这里实现登录逻辑
    }
  }
}
</script>

2. 使用Vue Router创建一个名为“Login”的路由，指向上述组件。

import { createRouter, createWebHistory } from 'vue-router'
import Login from './components/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 在Vue 3.0项目中安装并配置axios，并在上述Login组件中使用axios发送POST请求实现登录逻辑。

import axios from 'axios';

methods: {
  async login() {
    const response = await axios.post('http://localhost:3000/login', {
      username: this.username,
      password: this.password
    });

    const token = response.data.token;
    // 在这里将token保存至Vuex或localStorage等介质中，以供其他需要登录状态的路由使用

    this.$router.push('/dashboard');
  }
}

4. 在CLI脚手架（如Vue CLI）中创建一个名为“Login”的组件和对应的路由，然后重复上述步骤3中的内容实现登录逻辑。

希望这个代码示例对您有所帮助。