全栈开发四（vue登录页面）

这一节我们来写一个登录页面，这节用到的知识不多，主要是用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用于写页面的

在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插件）