饿了么神级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.2 Vue-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, 将视图与模型进行绑定

<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

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