使用ElementUI + Vue框架实现学生管理系统前端页面设计

目录

一.什么是ElementUI？

二.使用ElementUI和Vue-cli搭建前端页面

三.具体步骤

1.创建vue-cli项目

2.分析

3.创建组件

四.总结

---

一.什么是ElementUI？

ElementUI是一种网站快速成型工具，一套为开发者，设计师准备的基于Vue2.0的桌面端组件库。

ElementUI官方网站如下：Element - 网站快速成型工具

其中ElementUI提供了很多种组件的原型，以及源码供开发者们使用。

二.使用ElementUI和Vue-cli搭建前端页面

目标页面如下：

三.具体步骤

1.创建vue-cli项目

2.分析

 我们现在需要登录的前端页面，管理系统的前端页面，以及两个管理系统中的学生管理和专业管理界面，所以需要创建四个 .vue 组件。

还需要创建一个.js去配置路由。配置好路由一定要在main.js中导入路由对象。

首先，我们需要使用 vue-cli 和 ElementUI 就需要通过终端将 router 组件和 elementui的组件进行导入：

//导入router组件
npm i vue-router@3.5.3

//导入ElementUI组件

npm i element-ui -S

下载完成后在package.json中查看是否导入成功。

导入成功后在main.js中配置：

3.创建组件

首先我们先来创建前端首页的第一个登陆界面：

注意：1.账号和密码为空时点击登录要提示信息。

2.密码框要采用隐藏式