登录实现步骤
一、在components创建一个Login.vue文件
二、先搭建一个单页面组件的框架
- 在写html代码,注意template标签内一定要有一个html标签包裹所写的内容。例如下面的例子就用
包裹住;
- 在 script 标签里面编写脚本;
- 在 style 标签里写样式;
用element-ui组件先编写一个基本的页面
<template>
<div id="login">
<el-form :model="loginForm">
<h2>Ray商城登录</h2>
<el-form-item>
<el-input name="username" placeholder="请输入用户名/手机号" auto-complete="on"></el-input>
</el-form-item>
<el-form-item>
<el-input name="password" placeholder="请输入密码" auto-complete="on"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "#login",
data() {
return {
}
},
methods: {
}
};
</script>
<style scoped>
.el-input {
width:300px;
}
</style>