帮我用vue2写一个鲜花商城的登录页面
时间: 2023-08-28 14:14:15 浏览: 37
好的,我可以帮你实现一个简单的鲜花商城的登录页面。首先你需要安装Vue2和Vue CLI,然后创建一个新项目。
在项目的src目录下创建一个名为Login.vue的组件,代码如下:
```vue
<template>
<div class="login-container">
<h2>欢迎登录鲜花商城</h2>
<form>
<div class="form-group">
<label>用户名:</label>
<input type="text" v-model="username">
</div>
<div class="form-group">
<label>密码:</label>
<input type="password" v-model="password">
</div>
<button type="button" @click="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// TODO: 实现登录逻辑
}
}
}
</script>
<style>
.login-container {
margin: 0 auto;
width: 400px;
padding: 20px;
border: 1px solid #ccc;
}
.form-group {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 80px;
}
input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 5px 10px;
background-color: #f60;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
```
这个组件包含一个表单,其中有用户名和密码两个输入框,以及一个登录按钮。当用户点击登录按钮时,我们需要实现登录逻辑,这里暂时用TODO来占位。
然后在App.vue中引入这个组件:
```vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
```
接着在router/index.js中配置路由:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
最后,在main.js中挂载路由:
```javascript
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')
```
现在你可以启动项目,并在浏览器中访问http://localhost:8080/,就可以看到登录页面了。