好的，下面是一个
使用 Vue 前端
框架创建登录和注册页面的简单示例。
首先，需要创建一个
Vue 项目。可以
使用 Vue CLI 工具来创建：
```bash
npm install -g @
vue/cli
vue create my-project
cd my-project
```
然后，在 `src` 目录下创建一个 `components` 文件夹，用于存放组件。
在 `components` 文件夹
中，创建两个组件：`Login
Form.
vue` 和 `Register
Form.
vue`。
`Login
Form.
vue` 组件模板：
```html
<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>
```
`Register
Form.
vue` 组件模板：
```html
<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` 的页面组件，用于渲染登录页面：
```html
<template>
<div>
<h1>Login</h1>
<Login
Form />
</div>
</template>
<script>
import Login
Form from '@/components/Login
Form.
vue'
export default {
components: {
Login
Form
}
}
</script>
```
同样地，在 `src` 目录下创建一个名为 `Register.
vue` 的页面组件，用于渲染注册页面：
```html
<template>
<div>
<h1>Register</h1>
<Register
Form />
</div>
</template>
<script>
import Register
Form from '@/components/Register
Form.
vue'
export default {
components: {
Register
Form
}
}
</script>
```
最后，在 `App.
vue` 文件
中添加路由，以便在浏览器
中访问登录和注册页面：
```html
<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` 的文件，用于配置路由：
```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 实例上：
```js
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` 即可看到登录和注册页面了。
以上示例只是一个简单的示例，实际的登录和注册逻辑需要根据具体需求进行实现。
6145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
