这一节我们来写一个登录页面，这节用到的知识不多，主要是用vue组件，废话不多说，我们先来看看页面。
image.png
上面的页面非常之简单，所以我们就没必要把它分成组件了，直接一个页面就搞定了;
首先我们从route.js添加一个路由
{
name: 'login', //路由的名称，这个值是唯一 ，起名的好处就是在跳转的时候放便
meta: {
title: '登录'
},
path: 'login',
component: function (resolve) {
require(['./view/login/index.vue'], resolve)
}
}
在src/view/建立一个文件夹login,并建立index.vue，代码如下，login的样式的写在 vue文件里，但为什么不把样式抽出来呢？页面经常用到的就抽出来独立放在 css文件中，不重用的直接写页面上就行。当然如果项目小直接独立样式也是可以的。具体看需求;我这里是抽出来的放的，在 src/style/新建一个view.less用于写页面的
<template>
<section class="login-bg">
<div class="login-box">
<div class="login-logo">管理系统
</div>
<div class="ul-login">
<div class="item-login"><input v-model="sub.admin" class="input-login" type="text" placeholder="请输入登录帐号" />
</div>
<div class="item-login"><input v-model="sub.pwd" class="input-login" type="password" placeholder="请输入登录密码" /></div>
</div>
<div class="btn-box">
<button class="btn btn-login" @click="submit()">{{stateWord}}</button>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
sub:{ //登录的帐号密码
admin: '',
pwd: ''
},
stateWord:'登录' //登录时的状态
}
},
ready() {
},
components: {
},
watch: {
},
methods: {
submit(){
}
}
};
</script>
在src/style建立一个public.less用于写一些公共的样式，再建一个const.less用于存放less变量公式
然后在 styles.less中引入,less的语法具体语法请看less的介绍
@import "const.less"; //注意顺序，这个一定要在前面
@import "public.less";
@import "view.less";
const.less:
@gray: #eee;
@link: #333;
@white: #fff;
@word: #333;
.border-radius(@a, @b) when(@a=0) {
border-radius: @b;
-webkit-border-radius: @b;
-moz-border-radius: @b
}
.border-radius(@a, @b) when(@a=1) {
border-top-left-radius: @b;
-webkit-border-top-left-radius: @b;
-moz-border-top-left-radius: @b;
}
.border-radius(@a, @b) when(@a=2) {
border-top-right-radius: @b;
-webkit-border-top-right-radius: @b;
-moz-border-top-right-radius: @b;
}
.border-radius(@a, @b) when(@a=3) {
border-bottom-right-radius: @b;
-webkit-border-bottom-right-radius: @b;
-moz-border-bottom-right-radius: @b
}
.border-radius(@a, @b) when(@a=4) {
border-bottom-left-radius: @b;
-webkit-border-bottom-left-radius: @b;
-moz-border-bottom-left-radius: @b
}
public.less
body,
html {
padding: 0;
margin: 0;
background-color: #eee;
box-sizing: border-box;
}
html {
font-size: 100px;
font-family: "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
height: 100%;
padding: 0px;
margin: 0px;
}
body {
font-size: .14rem;
color: #333;
height: 100%;
}
a,button {
cursor: pointer;
}
a {
color: @gray;
text-decoration: none;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
view.less
//登录页 login/index.vue
.login-bg {
height: 100%;
background: url(img/login.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.login-box {
box-sizing: border-box;
width: 320px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
overflow: hidden;
height: 260px;
position: absolute;
margin-left: -160px;
margin-top: -160px;
left: 50%;
top: 50%;
.login-logo {
text-align: center;
color: @white;
height: 30px;
color: @word; font-size: 18px;
}
.item-login {
margin: 10px;
text-align: center; font-size: 18px;
}
.input-login {
border: none;
background-color: rgba(255, 255, 255, 0.4);
width: 280px;
padding: 0 10px;
font-size: 14px;
height: 40px;
border-radius: 4px;
box-sizing: border-box;
}
.btn-box {
width: 100%; text-align: center;
}
.btn-login {
width: 280px;
background-color: #7da6e2;
color: #fff;
height: 0.4rem;
margin: auto;
border: none;
.border-radius(0,4px)
}
}
具体的样式怎样写要看你自己的需求,这样页面就写好，这样我们就可以提交数据，下一节我们将写一个post的Vue插件，涉及到xhr的知识,用原生编写ajax，拒绝用插件
由于gulp监听问题我改了一下gulp的watch() 具体自己去查看
后续的文件建我就不在这里再写了，源代码里写得还是很清楚的
源文件都在：https://pan.baidu.com/s/1miMJuYW
项目启动：
gulp
大家有什么建议可以发邮箱到我的E-mail,
我的QQ：1830305999
也可以加入我们的Q群:190949802
我的主页：www.itvwork.com网站还没建好，正在建设中
上一篇:全栈开发三（vue组件）
下一篇:全栈开发五（编写vue ajax插件）
网友评论