vue+elementui搭建后台管理界面-登录

1 node环境安装

从 node官网下载安装包

2 vue-cli

npm install vue-cli -g

3 新建项目

vue init webpack vue-project

可保持默认，一路回车
完成后

cd vue-project
npm run dev

4 安装并引入 elementui

npm install element-ui --save

编辑 src/main.js , 修改为

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({el: '#app',router,render: h => h(App)
})

5 编写登录页面

src 目录下新建目录 views
编写 views/Login.vue

<template><div class="login-container"><el-form :model="ruleForm2" :rules="rules2"status-iconref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-page"><h3 class="title">系统登录</h3><el-form-item prop="username"><el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input></el-form-item><el-checkbox v-model="checked"class="rememberme">记住密码</el-checkbox><el-form-item style="width:100%;"><el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button></el-form-item></el-form></div>
</template><script>
export default {data(){return {logining: false,ruleForm2: {username: 'admin',password: '123456',},rules2: {username: [{required: true, message: '请输入账号', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'}]},checked: false}},methods: {handleSubmit(event){this.$refs.ruleForm2.validate((valid) => {if(valid){this.logining = true;if(this.ruleForm2.username === 'admin' && this.ruleForm2.password === '123456'){this.logining = false;sessionStorage.setItem('user', this.ruleForm2.username);this.$router.push({path: '/home'});}else{this.logining = false;this.$alert('用户名或密码错误!', '提示', {confirmButtonText: 'ok'})}}else{console.log('error submit!');return false;}})}}
}
</script><style scoped>.login-container {width: 100%;height: 100%;background: #4373a5;/* 登录框上下对齐 */display: flex;align-items: center;
}
.login-page {-webkit-border-radius: 5px;border-radius: 5px;margin:0px auto;width: 350px;padding: 20px 35px 35px 15px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {margin: 0px 0px 15px;text-align: left;
}
</style>

6 增加路由

访问 login 要跳转到登录页面
修改 router/index.js 为

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/login',name: 'Login',component: Login},]
})

访问 http://127.0.0.1:8080/#/login 出现登录页面:

可参考：https://www.cnblogs.com/wbjxxzx/p/9942648.html

vue+elementui搭建后台管理界面-登录相关推荐

vue+elementui搭建后台管理界面(登录)
转载 https://www.cnblogs.com/wbjxxzx/p/9942648.html
vue+antd搭建后台管理界面模版（PC端），适配中文、英文、日文 mock数据，开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
easyexcel根据模板写入_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员灿若星空[1] 写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...
用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员灿若星空写作而成,欢迎加入图雀社区,一起创作精彩的免费技术教程,予力编程行业发展. 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经 ...
post json后台处理数据_用 Vue+ElementUI 搭建后台管理极简模板
写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建好了一个后台管理系统的基础框架,教你如何在此基础上快速开发自己的后台管理系统,能让读者能在掌握一些基础 ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
Easyui 搭建后台管理界面
Easyui是目前后台管理界面使用比较流行的框架. 以下是我个人初学Easyui api后搭建的后台管理界面. 框架使用jquery-easyui-1.5.3 首页main.jsp代码,主要使用eas ...
VUE搭建后台管理界面
后台管理一.前言二.依赖配置三.koa框架四.数据库五.路由六.前端界面 6.1 登录界面 6.2 注册界面 6.3 展示界面七.阿里云部署 7.1 前端项目 7.2 后端node 7. ...