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

浅浅的花香味﹌ 2022-11-10 03:48 1198阅读 0赞

## 1. Element-UI介绍 ##

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

Element-UI官方站点：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

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

## 2. Element-UI使用 ##

### 2.1 命令行方式安装 ###

1. 创建 一个新的项目

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

npm i element-ui -S

![20210316105009288.png][]

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);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70][]

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

<template>
        <div id="app">
            
            <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, 查看页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1][]

### **2.2 Vue-CLI工程改造** ###

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

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

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对话框组件 ###

![20210316110035746.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2][]

<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 ###

### 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, 将视图与模型进行绑定

<el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
            <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3][]

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

*  第一步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4][]

*  第二步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 5][]

*  第三步  复制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 的其他组件，直接去官网找就行了

[Vue.js]: https://blog.csdn.net/u012660464/article/details/114170056
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[20210316105009288.png]: /images/20221023/b492feeba72b40158b5612be6b527ddc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70]: /images/20221023/6dd122239ca04a0682fc43758397365f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/03c140fcba7d4a6e8f5a869825984954.png
[20210316110035746.png]: /images/20221023/800e1e12c5554cd1af51438a31dd3758.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/206f049232dc455f9d0440ad77e27bc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/617138c43d7a474792c5cfcc2fe83227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 4]: /images/20221023/4c9c33d066c2449e930a47e262296e43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2NjA0NjQ_size_16_color_FFFFFF_t_70 5]: /images/20221023/44d53fd8095640c79d16f550317d1b02.png