1.注册组件： 两个输入框，输入注册账号和注册密码 一个按钮，注册按钮 点击按钮对数据进行判断 正则要求账号为4-12位数字字母下划线组成 正则要求密码为6位数字 数据符合规则，则弹框注册成功并跳转到登陆页面,否则提示登录失败 2.登录组件： 两个输入框，输入登陆账号和登陆密码 一个按钮，登录按钮 点击登录按钮，将登陆的数据和注册的数据进行对比 如果数据没问题 跳转到首页 否则弹框提示登录失败 3.首页组件： 一句话：欢迎xxx来到首页 xxx-->账号

对于注册组件，你可以使用以下代码编写：

<template>
  <div>
    <input type="text" v-model="account" placeholder="请输入账号">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="register">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    register() {
      const accountRegex = /^[a-zA-Z0-9_]{4,12}$/
      const passwordRegex = /^\d{6}$/
      
      if (accountRegex.test(this.account) && passwordRegex.test(this.password)) {
        // 注册成功逻辑
        alert('注册成功')
        // 跳转到登录页面
        this.$router.push('/login')
      } else {
        // 注册失败逻辑
        alert('注册失败')
      }
    }
  }
}
</script>

对于登录组件，你可以使用以下代码编写：

<template>
  <div>
    <input type="text" v-model="account" placeholder="请输入账号">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 假设注册的数据存在于一个数组中，数组中每个元素包含account和password属性
      const registeredData = [
        { account: 'example1', password: '123456' },
        { account: 'example2', password: 'abcdef' },
        // ...
      ]
      
      const matchedData = registeredData.find(data => data.account === this.account && data.password === this.password)
      
      if (matchedData) {
        // 登录成功逻辑
        alert('登录成功')
        // 跳转到首页
        this.$router.push('/home')
      } else {
        // 登录失败逻辑
        alert('登录失败')
      }
    }
  }
}
</script>

对于首页组件，你可以使用以下代码编写：

<template>
  <div>
    <p>欢迎{{ account }}来到首页</p>
  </div>
</template>

<script>
export default {
  computed: {
    account() {
      // 假设登录成功后保存了账号信息到localStorage中
      return localStorage.getItem('account')
    }
  }
}
</script>

以上代码只是一个简单示例，实际项目中可能会有更多的逻辑和处理方式，你可以根据自己的需求进行调整。