Vue 结合 Element-UI写一个登录注册

Vue.js 结合 Element UI 搭建登录注册功能的基本步骤如下：

首先，你需要安装 Vue 和 Element UI，以及 Vue CLI 工具（如果你还没有）。可以使用以下命令进行安装：

npm install -g @vue/cli
vue create my-project
cd my-project
npm install element-ui --save

然后，在 `src` 文件夹中，创建两个组件文件：`Login.vue` 和 `Register.vue`。

**Login.vue**:

<template>
  <el-form ref="loginForm">
    <!-- 元素输入框 -->
    <el-form-item label="用户名">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="password" placeholder="请输入密码"></el-form-item>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit">登录</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleSubmit() {
      // 这里只是一个基本示例，实际应用中需处理提交验证和登录逻辑
      if (this.username && this.password) {
        console.log('提交登录信息:', { username: this.username, password: this.password });
      }
    }
  }
};
</script>

**Register.vue**:

<!-- 类似 Login.vue 的结构，但添加额外的字段如邮箱、确认密码等 -->

在主应用组件中，你可以通过路由管理来切换登录和注册页面，或者在布局中动态渲染这两个组件。例如：

import Vue from 'vue';
import App from './App.vue';
import { ElContainer, ElMain } from 'element-plus';

// 导入登录和注册组件
import Login from '@/components/Login.vue';
import Register from '@/components/Register.vue';

new Vue({
  render: h => h(
    ElContainer,
    [
      ElMain,
      // 使用 v-if 切换展示内容
      <template v-if="!loggedIn">
        <Login />
      </template>
      <template v-else>
        <h1>欢迎，已登录!</h1>
        <button @click="logout">注销</button>
      </template>
    ]
  ),
  data() {
    return {
      loggedIn: false,
    };
  },
  created() {
    // 初始化状态（这里假设用户已经登录）
    this.loggedIn = localStorage.getItem('token') !== null;
  },
  methods: {
    logout() {
      localStorage.removeItem('token');
      this.loggedIn = false;
    },
  },
}).$mount('#app');

注意这仅是一个基础示例，生产环境中还需要考虑错误处理、表单验证和数据持久化等问题。完成以上步骤后，你可以启动项目并在浏览器中查看登录和注册页面。