羊村懒王

这个屌丝很懒，什么也没留下！

热门标签

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

作者：羊村懒王 | 2024-03-01 12:26:15

踩

饿了么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
1

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);
1
2
3
4
5
6

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

2.2Vue-CLI工程改造

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

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

<template>
    <div id="app"></div>
</template>

<style>
</style>
1
2
3
4
5
6

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
1
2
3
4
5
6
7
8
9
10
11
12

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

2.3 安装axios

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

npm i axios
1

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

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

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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3.4 修改App.vue

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

<style>
</style>
1
2
3
4
5
6
7
8
9

3.5 编写登录功能

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

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

2. 修改登陆触发事件

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

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("对不起! 登录错误!");
        });
    },
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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("对不起! 登录错误!");
        });
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/173953