使用 Vue 前端框架创建登录和注册页面

好的，下面是一个使用 Vue 前端框架创建登录和注册页面的简单示例。

首先，需要创建一个 Vue 项目。可以使用 Vue CLI 工具来创建：

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

然后，在 `src` 目录下创建一个 `components` 文件夹，用于存放组件。

在 `components` 文件夹中，创建两个组件：`LoginForm.vue` 和 `RegisterForm.vue`。

`LoginForm.vue` 组件模板：

<template>
  <form @submit.prevent="login">
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" required>
    </div>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password" required>
    </div>
    <button type="submit">Login</button>
  </form>
</template>

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

`RegisterForm.vue` 组件模板：

<template>
  <form @submit.prevent="register">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="name" required>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email" required>
    </div>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password" required>
    </div>
    <button type="submit">Register</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      password: ''
    }
  },
  methods: {
    register() {
      // TODO: 实现注册逻辑
    }
  }
}
</script>

接下来，在 `src` 目录下创建一个名为 `Login.vue` 的页面组件，用于渲染登录页面：

<template>
  <div>
    <h1>Login</h1>
    <LoginForm />
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm.vue'

export default {
  components: {
    LoginForm
  }
}
</script>

同样地，在 `src` 目录下创建一个名为 `Register.vue` 的页面组件，用于渲染注册页面：

<template>
  <div>
    <h1>Register</h1>
    <RegisterForm />
  </div>
</template>

<script>
import RegisterForm from '@/components/RegisterForm.vue'

export default {
  components: {
    RegisterForm
  }
}
</script>

最后，在 `App.vue` 文件中添加路由，以便在浏览器中访问登录和注册页面：

<template>
  <div id="app">
    <router-link to="/login">Login</router-link>
    <router-link to="/register">Register</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在 `src` 目录下创建一个名为 `router.js` 的文件，用于配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Register from '@/views/Register.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

最后，在 `main.js` 文件中引入路由并将其挂载到 Vue 实例上：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，通过运行 `npm run serve` 命令，在浏览器中访问 `http://localhost:8080/login` 和 `http://localhost:8080/register` 即可看到登录和注册页面了。

以上示例只是一个简单的示例，实际的登录和注册逻辑需要根据具体需求进行实现。