前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中一个,只是在GitHub上ElementUI是使用人数最多的,也可以使用其他的UI库,ElementUI官网地址:https://element.eleme.cn/#/zh-CN/component/installation
使用npm的方式安装
npm i element-ui -S:i表示install安装、-S表示-save安装在package.json文件下的dependencies下
在main.js中引入如下内容
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
下载成功后在package.json文件下多了如下内容,如果有一天要进行版本升级,只需要修改一下后面的版本号,修改完成后执行npm install即可
然后新建一个Login.vue组建,把它引入到index.js页面并且定义到路由表routes中
App.vue页面如下,这样在首页中就只有Login.vue页面了
直接使用ElementUI中的card中的基础卡片
flex布局:弹性盒子布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
登录页面Login.vue详细代码如下,具体说明在注释中
<template>
<div>
<!--flex弹性盒子模型,justify-content:主抽 -->
<div style="display: flex;justify-content: center;margin-top: 150px">
<el-card style="width: 400px">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<table>
<tr>
<td>用户名</td>
<td>
<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
<!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
</td>
</tr>
<tr>
<!-- 占两行-->
<td colspan="2">
<!-- 点击事件的两种不同的写法v-on:click和 @click-->
<!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
<el-button style="width: 300px" type="primary" @click="doLogin">登录</el-button>
</td>
</tr>
</table>
</el-card>
</div>
</div>
</template>
<script>
export default {
//单页面中不支持前面的data:{}方式
data() {
//相当于以前的function data(){},这是es5之前的写法,新版本可以省略掉function
return{
//之前是在里面直接写username,password等等,但是这里要写return
//因为一个组件不管要不要被其他组件用,只要这样定义了,它就会认为可能这个组件会在其他的组件中使用
//比如说在这里定义了一个变量,然后把这个组件引入到A组件中,A组件中修改了这个变量
//同时这个组件也在B组件中引用了,这时候A里面一修改,B里面也变了,它们用的是一个值
//可是一般来说可能希望在不同的组件中引用的时候,使用不同的值,所以这里要用return
//这样在A组件和B组件分别引用这个变量的时候是不会互相影响的
user:{
username:'zhangsan',
password:'123',
//为了登录方便,可以直接在这里写好用户名和密码的值
}
}
},
methods:{
doLogin(){//一点击登录按钮,这个方法就会执行
alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
}
}
}
</script>
一个vue+ElementUI的登录页面就算写好了,效果如下