饿了么ui框架_element UI[通俗易懂]

饿了么ui框架_element UI[通俗易懂]1.Element-UI介绍element-ui是饿了么前端出品的基于Vue.js的后台组件库,方便程序员进行页面快速布局和构建

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

饿了么ui框架_element UI[通俗易懂]

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

饿了么ui框架_element UI[通俗易懂]

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, 查看页面

饿了么ui框架_element UI[通俗易懂]

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

饿了么ui框架_element UI[通俗易懂]

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

饿了么ui框架_element UI[通俗易懂]

<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

饿了么ui框架_element UI[通俗易懂]

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

  • 第一步

饿了么ui框架_element UI[通俗易懂]

  • 第二步

饿了么ui框架_element UI[通俗易懂]

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

今天的文章饿了么ui框架_element UI[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/79963.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注