2025年饿了么神级UI组件库——Element-UI使用指南

大家好，我是讯享网，很高兴认识大家。

1.Element-UI介绍

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

Element-UI官方站点：https://element.eleme.cn/#/zh-CN

可以进去选择想要的组件，直接复制代码，改巴改巴，就可以运用到自己的项目场景。

2.Element-UI使用

2.1 命令行方式安装

1. 创建一个新的项目

2. 当前项目下打开终端, 安装依赖包 ,执行下面的命令

npm i element-ui -S

讯享网

3. 打开 main.js , 导入Element-UI 相关资源.

main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。

讯享网//导入组件库 import ElementUI from 'element-ui' //导入组件相关样式 import 'element-ui/lib/theme-chalk/index.css' //配置Vue插件 将El安装到Vue上 Vue.use(ElementUI);

4. 复制Element 按钮样式到app.vue文件的 template下

<template> <div id="app"> <!-- 测试elementUI --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <div id="nav"> <router-link to="/">Home</router-link>| <router-link to="/about">About</router-link> </div> <router-view /> </div> </template>

5. 启动项目 npm run serve, 查看页面

2.2Vue-CLI工程改造

1. 删除components 目录下的 HelloWord.vue组件

2. 删除App.vue中的部分内容,只保留如下部分

讯享网<template> <div id="app"></div> </template> <style> </style>

3. 删除router文件下的路由文件 index.js部分内容,只保留如下部分

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ ] const router = new VueRouter({ routes }) export default router

4. 删除views目录下的 About.vue 与 Home.vue

2.3 安装axios

1. npm安装：使用npm下载axios包

讯享网npm i axios

2. 在main.js文件中导入axios 相关资源

//引入axios import axios from 'axios' //Vue对象使用axios Vue.prototype.axios = axios;

3. 案例：用户登录界面制作

3.1 Dialog对话框组件

我们可以用Dialog制作一个登陆弹窗,选择自定义内容

讯享网<el-dialog title="收货地址" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="活动名称" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item> <el-form-item label="活动区域" :label-width="formLabelWidth"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="dialogFormVisible = false">确 定</elbutton> </div> </el-dialog>

3.2 创建login.vue 组件

1. 在components 下创建login.vue

2. 将Diglog组件的内容,拷贝到login.vue,进行修改:

<template> <el-dialog title="登录" :visible.sync="dialogFormVisible"> <el-form> <el-form-item label="用户名称" :label-width="formLabelWidth"> <el-input autocomplete="off"></el-input> </el-form-item> <el-form-item label="用户密码" :label-width="formLabelWidth"> <el-input autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogFormVisible = false">登录</elbutton> </div> </el-dialog> </template> <script> export default { data() { return { formLabelWidth: "120px", //宽度 dialogFormVisible: true }; } }; </script> <style scoped> </style>

3.3 配置路由

讯享网import Vue from "vue"; import VueRouter from "vue-router"; import Login from "@/components/Login.vue" Vue.use(VueRouter); const routes = [ //访问 /,也跳转到login { path:'/', redirect:'login' //重定向都login }, //登录 { path:'/login', name:'login', component:Login } ]; const router = new VueRouter({ routes, }); export default router;

3.4 修改App.vue

<template> <div id="app"> <!-- router-view 的作用是根据访问的路径,渲染路径匹配到的视图组件 --> <router-view></router-view> </div> </template> <style> </style>

3.5 编写登录功能

1. 去掉关闭按钮, 添加一个属性 :show-close="false"

讯享网<el-dialog title="登录" :show-close="false" :visible.sync="dialogFormVisible">

2. 修改登陆触发事件

<el-button type="primary" @click="login">登录</el-button>

3. 双向数据绑定

data 中定义数据
data() {
return {
formLabelWidth: “120px”, //宽度
dialogFormVisible: true, //是否关闭对话框
user: { username: “”, password: “” }, //登录数据
};
},
使用 v-model, 将视图与模型进行绑定

4. 编写login方法

讯享网methods: { login() { //定义常量保存 url const url = "http"; //发送请求 this.axios .get(url, { //携带参数 params: { username: this.user.username, password: this.user.password, }, }) .then((res) => { console.log(); //成功就将对话框关闭 this.dialogFormVisible = false; }) .catch((error) => { //出现错误使用ElementUI提供的消息提示 this.$message.error("对不起! 登录错误!"); }); }, },

3.6 Postman搭建mock server

Mock server就是模拟一个服务器，我们使用Mock server可以模拟后台接口,对请求进行响应.
在前后端分离的开发中前端利用mockeserver模拟出对应接口，拿到返回数据来调试，无需等后端开发人员完成工作。

postman模拟出一个server 步骤:

1. 使用postman模拟出一个server

2. 打开如下窗体，创建一个伪服务

第一步

第二步

第三步复制URL
第四步修改请求的URL
const url = “复制上面的地址/login”;

3.7 登录成功后跳转

在js中设置跳转，常用的一种方法是 this.$router.push

methods: {
login() {
//定义常量保存 url
const url = “https://33284b33-e976-4124-a3a0-17044addc1e1.mock.pstmn.io/login”;

 //发送请求 this.axios .get(url, { //携带参数 params: { username: this.user.username, password: this.user.password, }, }) .then((res) => { console.log(res.data); alert("登录成功!"); //成功就将对话框关闭 this.dialogFormVisible = false; //跳转页面,前端跳转页面必须使用路由,使用$router对象中的push方法 this.$router.push('/index'); }) .catch((error) => { //出现错误使用ElementUI提供的消息提示 this.$message.error("对不起! 登录错误!"); }); },

接下来，就是运行测试啦~

以后，想使用 element-UI 的其他组件，直接去官网找就行了