餓了麼神級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

餓了麼神級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.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對話框元件

餓了麼神級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, 将視圖與模型進行綁定

<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

餓了麼神級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使用指南

1. Element-UI介紹

2. Element-UI使用

2.1 指令行方式安裝

2.2 Vue-CLI工程改造

2.3 安裝axios

3. 案例：使用者登入界面制作

3.1 Dialog對話框元件

3.2 建立login.vue 元件

3.3 配置路由

3.4 修改App.vue

3.5 編寫登入功能

3.6 Postman搭建mock server

3.7 登入成功後跳轉

繼續閱讀

Vue $emit 子元件向父元件傳遞參數

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條