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

大家好，欢迎来到IT知识分享网。

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 中定义数据
• 使用 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

   //发送请求 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 的其他组件，直接去官网找就行了