3、Vue+ElementUI制作用户登录页面

前面两篇简单了解了一下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之前的写法，新版本可以省略掉functionreturn{//之前是在里面直接写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的登录页面就算写好了，效果如下

3、Vue+ElementUI制作用户登录页面相关推荐

Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
html 存储登录状态,Vue中保存用户登录状态实例代码
首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个 ...
flutter 一个用户登录页面
一个用户登录页面输入校验 import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart';void m ...
html网页设计一个简单的用户登录页面
结果代码 login.html <!DOCTYPE html> <html lang="en"> <head><meta charset ...
Vue+ElementUi 项目中将页面内容转为 Word文档下载
Vue+ElementUi 项目中将页面内容转为 Word文档下载需要提前做好的现成模板(魔板个页面基本上相同的内容)-模板内有变量,替换成页面对应的数据 HTML页面: 转换的word 以下是正 ...
Vue+ElementUI一个简单登录界面
1.项目搭建开始工作参考这个博客创建一一个名为hello-vue 的工程vue init webpack hello-vue 安装依赖,我们需要安装vue-router.element-ui. s ...
使用v-cli创建项目，引入element-ui构建用户管理页面实现增删改查
文章目录前言一.使用v-cli创建vue项目文件二.引入element-ui 三.开始实现功能 1.初步页面,表格绘制 2.实现增加功能 3.实现修改和删除功能 4.实现查询操作总结前言记 ...
mxonline实战3，编写首页及用户登录页面1
对应github地址:首页和用户登陆1 一. 显示首页 1. 修改mxonline/setttings.py 在TEMPLATES代码块修改DIRS为 'DIRS': [os.path.join( ...
将页面转发到用户登录页面
通过<jsp:forward>动作标识可以将请求转发到其他的Web资源,如另一个JSP页面,Html页面,Servlet页面 <jsp:forward>动作标识的语法格式: & ...

3、Vue+ElementUI制作用户登录页面

3、Vue+ElementUI制作用户登录页面相关推荐

最新文章

热门文章