利用vue3写一个简单的登陆界面

在Vue 3中创建一个简单的登录界面，首先需要设置项目结构并引入必要的组件。下面是一个基础的步骤：

1. **初始化项目**:
使用`vue create your-project-name`命令创建一个新的Vue 3项目。

2. **创建组件**:
- `Login.vue`: 这里将编写登录表单组件。

   <template>
     <div class="login-form">
       <h2>Login</h2>
       <form @submit.prevent="handleSubmit">
         <input v-model="username" type="text" placeholder="Username" />
         <input v-model="password" type="password" placeholder="Password" />
         <button type="submit">Login</button>
       </form>
       <p v-if="error">{{ error }}</p>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         username: '',
         password: '',
         error: ''
       };
     },
     methods: {
       handleSubmit(event) {
         event.preventDefault();
         if (this.username === 'admin' && this.password === 'password') {
           // 模拟登录成功
           this.error = '';
         } else {
           this.error = 'Invalid credentials';
         }
       }
     }
   }
   </script>

- 可能还需要一个全局样式文件`App.css`来美化登录界面。

3. **在App.vue中使用组件**:
在`<main>`标签内导入并显示`Login`组件：

   <template>
     <div id="app">
       <Login @logout="handleLogout" />
     </div>
   </template>

   <script>
   import Login from '@/components/Login.vue';

   export default {
     components: {
       Login
     },
     methods: {
       handleLogout() {
         // 清除登录状态或跳转到其他页面
       }
     }
   }
   </script>

4. **路由配置**:
如果有需要，可以添加路由来控制登录后的视图，但这不是必需的。

5. **运行项目**:
使用`npm run serve`启动项目，在浏览器中访问`http://localhost:8080`查看登录界面。