ElementUI组件

目录

1、安装ElementUI

2、在main.js文件中加入

3、使用组件

终端运行:


Element,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库.

1、安装ElementUI

控制台输入

npm i element-ui -S

2、在main.js文件中加入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

导入ElementUI

import Vue from 'vue'
import App from './App.vue'
//导入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip=falseimport router from './router/index.js'
Vue.use(router);new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')

3、使用组件

创建src下目录的router

index.js

import Vue from "vue";
// 导入路由
import router from "vue-router";
//导入注册组件
import Index from '../Index.vue';
import Login from '../Login.vue';
import MajorList from"../views/MajorList.vue";
import StudentList from"../views/StudentList.vue";
/* 注册 定义组件访问地址 */
Vue.use(router);var rout = new router({routes: [{path: '/',component: Login},{path: '/login',component: Login},{path: '/index',component: Index,children: [{path: '/majorlist',component: MajorList},{path:'/studentlist',component: StudentList}]}]
});//导出路由对象
export default rout;

 创建src下目录的views

Index.vue

<template><div><el-container><el-header style="text-align: right; font-size: 12px"><div class="header-title">后台管理系统</div><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>修改密码</el-dropdown-item><el-dropdown-item><span @click="logout()"> 安全退出</span></el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-container><!-- 侧边栏 --><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']" router><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>操作菜单</template><el-menu-item-group><el-menu-item index="/majorlist">专业管理</el-menu-item><el-menu-item index="/studentlist">学生管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><!-- 工作区间 --><el-main><!-- 显示子路由 --><router-view></router-view></el-main></el-container></el-container></div>
</template><script>export default {data() {return {}},methods: {logout() {this.$confirm('您确定要退出?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$router.push("/login");})}}}
</script><style>.el-header {text-align: center;background-color: #B3C0D1;color: #333;line-height: 60px;}.header-title {width: 300px;float: left;text-align: left;font-size: 20px;color: white;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;height: 100vh;}
</style>

Login.vue

<template><!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同 内容都写在一个template标签中,template标签必须有一个根标签--><div class="login_container"><!-- 登录盒子--><div class="login_box"><!-- 头像盒子--><div class="img_box"><img src="./assets/logo.png" /></div><!-- 登陆表单 --><div><el-form ref="form" lable-width="80px"  style="margin: 50px;"><el-form-item label="账号" ><el-input v-model="account"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="password" show-password></el-input></el-form-item><el-form-item><el-button type="primary" @click="login()">登录</el-button><el-button>取消</el-button></el-form-item></el-form></div></div></div>
</template><script>/* 导出组件,并为组件定义数据,函数,生命周期函数 */export default {data() {return {account: "",password: ""}},methods: {login() {//前端验证账号和密码不能为空if (this.account.length == 0) {this.$message({message: '账号不能为空!',type: 'warning'});return;}if (this.password.length == 0) {this.$message({message: '密码不能为空!',type: 'warning'});return;}//与后端交互//向后端相应一个结果this.$router.push("/index");}}}
</script><style>.login_container {height: 100vh;margin: 0px;padding: 0px;background-repeat: no-repeat;background-size: cover;background-image: url(assets/bc.jpg);}.login_box {width: 450px;height: 350px;background-color: #fff;border-radius: 10px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);opacity: 0.95;}.img_box {width: 130px;height: 130px;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;border-radius: 50%;padding: 5px;border: 1px solid #eee;}.img_box img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}
</style>

 App.vue

<template><div id="app"><router-view></router-view></div>
</template><script>export default {name: 'app'}
</script><style>
</style>

最后再加入专业管理和学生管理即可

终端运行:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36034.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

老司机开发技巧,如何扩展三方包功能

前言 最近碰上有个业务&#xff0c;查询的sql如下&#xff1a; sql 复制代码 select * from table where (sku_id,batch_no) in ((#{skuId},#{batchNo}),...); 本来也没什么&#xff0c;很简单常见的一种sql。 问题是我们使用的是mybatis-plus&#xff0c;然后写的时候有没…

【智能制造-5】数采和电机

既然可以采集PLC的数据&#xff0c;为什么要采集电机的数据&#xff1f; 采集PLC&#xff08;可编程逻辑控制器&#xff09;的数据和采集电机的数据是两个不同的概念和目的。 PLC是用于控制和监控工业自动化过程的设备&#xff0c;它可以接收传感器的输入信号并根据预设的逻辑…

多线程软件不响应处理

多线程的问题,基本上由于写法不规范造成的问题,从而影响软件正常运行,或时不时出现软件不响应,但是其它CPU,内存保存不变的情况. 出现这样的情况,多半是软件运行时死锁或多个线程相互等待,从而引起的软件未响应的情况发生. 解决办法: 1.while,do while循环增加延时时间Sleep…

重庆交通大学24计算机考研数据速览,专硕第二年招生,复试线321分!

重庆交通大学&#xff08;Chongqing Jiaotong University&#xff0c;CQJTU&#xff09;&#xff0c;是由重庆市人民政府和中华人民共和国交通运输部共建的一所交通特色、以工为主的多科性大学&#xff0c;入选“中西部高校基础能力建设工程”、“卓越工程师教育培养计划”、国…

企业级堡垒机JumpServer

文章目录 JumpServer是什么生产应用场景 Docker安装JumpServer1.Docker安装2.MySQL服务安装3.Redis服务安装4.key生成5.JumpServer安装6.登录验证 系统设置邮箱服务器用户和用户组创建系统审计员资产管理用户创建资产节点资产授权查看用户的资产监控仪表盘 命令过滤器创建命令过…

Model3C芯片方案--86彩屏中控面板Modbus协议说明

一、概述 Model3C芯片是一款基于RISC-V的高性能、国产自主、工业级高清显示与智能控制MCU&#xff0c;配备强大的2D图形加速处理器、PNG/JPEG解码引擎&#xff0c;并支持工业宽温。基于Model3C芯片的86彩屏中控面板&#xff0c;通过集成Modbus协议&#xff0c;实现了与多种控制…

前端存储都有哪些

cookie 、sessionStorage、localStorange、http缓存 、indexDB cookie 由服务器设置&#xff0c;在客户端存储&#xff0c;然后每次发起同源请求时&#xff0c;发送给服务器端。cookie最多能存储4K数据&#xff0c;它的生存时间由expires属性指定&#xff0c;并且cookie只能被…

涨点超强!图像特征提取最新方法!性能效率快到飞起

在图像处理领域&#xff0c;有一个非常关键的步骤&#xff1a;图像特征提取。它能给我们提供一种高效、准确且灵活的方式来描述和分析图像内容。 通过降低图像数据的维度&#xff0c;去除冗余和噪声信息&#xff0c;图像特征提取不但简化了后续处理过程&#xff0c;还能提高算…

ffmpeg使用mjpeg把yuvj420p编码为jpg图像

version #define LIBAVUTIL_VERSION_MAJOR 58 #define LIBAVUTIL_VERSION_MINOR 12 #define LIBAVUTIL_VERSION_MICRO 100 note 1. 通过*.jpg推测时&#xff0c;out_fmt为image2&#xff0c;打开*.jpg文件时&#xff0c;in_fmt为image2 但是out_fmt为image2时&#xff…

web项目打包成可以离线跑的exe软件

目录 引言打开PyCharm安装依赖创建 Web 应用运行应用程序打包成可执行文件结语注意事项 引言 在开发桌面应用程序时&#xff0c;我们经常需要将网页集成到应用程序中。Python 提供了多种方法来实现这一目标&#xff0c;其中 pywebview 是一个轻量级的库&#xff0c;它允许我们…

滑动窗口算法——部分OJ题详解

目录 关于滑动窗口 部分OJ题详解 209.长度最小的子数组 3.无重复字符的最长字串 1004.最大连续1的个数Ⅲ 1658.将x减到0的最小操作数 904.水果成篮 438.找到字符串中所有字母异位词 30.串联所有单词的子串 76.最小覆盖子串 关于滑动窗口 其实滑动窗口也是通过双指针…

存储引擎MyISAM和InnoDB

目录 一、存储引擎概述 1.存储引擎概念 2.存储引擎分类 3.选择存储引擎的原则 二、InnoDB 存储引擎 三、MyISAM 存储引擎 四、实验操作 一、存储引擎概述 1.存储引擎概念 数据库存储引擎是数据库底层软件组件&#xff0c;数据库管理系统使用数据库引擎进行创建&#x…

Spring Boot中如何处理异步任务

Spring Boot中如何处理异步任务 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨在Spring Boot应用中如何处理异步任务&#xff0c;以提升系统的性…

Nuxt 的异步数据处理(八)

Nuxt.js 扩展了 Vue.js&#xff0c;增加了一个叫 asyncData 的方法&#xff0c;使得我们可以在设置组件的数据之前能异步获取或处理数据。 asyncData 方法 Nuxt.js 提供了几种不同的方法来使用 asyncData 方法&#xff0c;你可以选择自己熟悉的一种来用&#xff1a; 返回一个…

CMS垃圾回收过程中重新标记阶段为什么不能清理浮动垃圾

因为在并发标记时&#xff0c;因为是 GC 和用户线程是并发执行的&#xff0c;可能导致一部分已经标记为 从 GC Roots 不可达 的对象&#xff0c;若该对象在用户线程的修改下又可达了&#xff0c;Remark 的作用就是将这部分对象又标记为 可达对象&#xff08;漏标&#xff09;。…

Double 4 VR虚拟情景智能互动系统在小语种专业课堂上的应用

随着科技的进步&#xff0c;越来越多的教育机构开始尝试使用虚拟现实技术来提高教学效果。Double 4 VR虚拟情景智能互动系统就是这样一款能够为小语种专业课堂带来革新性体验的教学工具。 一、模拟真实环境&#xff0c;增强学习体验 系统通过高度仿真的虚拟环境&#xff0c;为学…

Git(涵盖GitHub\Gitee码云\GitLab)

Git(涵盖GitHub\Gitee码云\GitLab) 文章目录 Git(涵盖GitHub\Gitee码云\GitLab)课程介绍Git概述官网介绍版本控制介绍两种版本控制工具集中式版本控制工具分布式版本控制工具 Git工作机制代码托管中心 Git安装和客户端的使用Git常用命令设置用户签名初始化本地库查看本地库状态…

C++——string类用法指南

一、前言 在C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c;但是这些库函数与字符串是分离的&#xff0c;不太符合OOP的思想&#xff0c;而且底层空间需要用户自己管理&#xff0c;稍…

性能飞跃:深度优化IntelliJ IDEA的实战指南

性能飞跃&#xff1a;深度优化IntelliJ IDEA的实战指南 IntelliJ IDEA&#xff0c;作为Java开发者的首选IDE&#xff0c;以其强大的功能和智能化的代码辅助而闻名。然而&#xff0c;随着项目规模的增长&#xff0c;IDE的性能可能会成为瓶颈。本文将提供一份详尽的优化指南&…

C++编译时引入json/nlohmann文件报错

报错信息: In file included from /home/chenlang/catkin_ws/src/leanrning_communication/src/mysql/../utils/data.h:14:0,from /home/chenlang/catkin_ws/src/leanrning_communication/src/mysql/MyRobotDb.h:32,from /home/chenlang/catkin_ws/src/leanrning_communicatio…