Vue2中，新手使用Elemnt-UI、Ant Design Vue入门教程

060

开发准备

开发环境
开发工具：VsCode
node.js：18.16.0
vue/cli：5.0.8
npm：9.5.1
vue：2.6.14
less：4.0.0

项目搭建

  • 1、使用指令或vue ui创建（网上都有教程）

  • 2、创建完成后，项目完整结构如下：

Snipaste_2023-06-26_10-43-17.png

使用Element-UI

Snipaste_2023-06-26_10-46-54.png

Snipaste_2023-06-26_10-47-43.png

  • 3、在终端命令行执行npm i element-ui -S安装Element-UI

Snipaste_2023-06-26_10-48-11.png

  • 4、安装完成后，在项目的package.json文件中的dependencies项能看到安装的依赖及版本

Snipaste_2023-06-26_10-48-43.png

  • 5、根据官方文档即可上手使用，注意依赖版本和文档对应

Snipaste_2023-06-26_10-58-58.png

  • 6、在main.js中引入Element-UI依赖

Snipaste_2023-06-26_16-23-28.png

  • 7、组件的使用，最简单粗暴的方式就是：复制粘贴文档中的实例代码

  • 8、接下来就简单的综合使用一下组件，里面的所有组件代码都是复制的官方文档的，只修改了样式和内容，写了一个简单的后台界面，效果如下：

Snipaste_2023-06-26_16-12-51.png

  • 9、完整代码如下：
<template>

    <div class="bodys">

        <!-- 内容主容器 -->

        <el-container>
            <!-- 左边菜单栏 -->
            <el-aside>
                <!-- 导航菜单 -->
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    background-color="#001529"
                    text-color="#7b87ac"
                    active-text-color="#fff"
                    :collapse="isCollapse"
                >
                    <!-- 顶部-logo -->
                    <div class="em-logo" v-if="isCollapse">
                        <img src="@/assets/logo.png" width="35" height="35" />
                    </div>
                    <!-- 顶部-标题 -->
                    <div class="em-title" v-else>{{ title }}</div>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>导航一</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="分组2">
                            <el-menu-item index="1-3">选项3</el-menu-item>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="1-4-1">选项1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右边部分 -->
            <el-container>
                <!-- 顶部菜单栏 -->
                <el-header>
                    <!-- 展开/收起侧边栏 -->
                    <div>
                        <!-- 展开图标 -->
                        <i v-if="isCollapse" class="el-icon-s-unfold" @click="isCollapse = !isCollapse"></i>
                        <!-- 收起图标 -->
                        <i v-else class="el-icon-s-fold" @click="isCollapse = !isCollapse"></i>
                    </div>
                    <!-- 用户头像部分 -->
                    <div>
                        <!-- 头像 -->
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        <!-- 昵称 -->
                        <span>超级管理员</span>
                    </div>
                </el-header>
                <!-- 主要部分 -->
                <el-main>
                    <div class="tags">
                        <!-- 页面标签 -->
                        <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            effect="plain"
                            type="info"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)"
                        >
                            {{ tag }}
                        </el-tag>
                    </div>
                    <div class="tableHeader">
                        <!-- 表格标题 -->
                        <div>{{ tableTitle }}</div>
                        <!-- 功能操作区 -->
                        <div>
                            <div>
                                <!-- 搜索框 -->
                                <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" size="small"> </el-input>
                            </div>
                            <div>
                                <!-- 搜索按钮 -->
                                <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
                            </div>
                            <div>
                                <!-- 重置按钮 -->
                                <el-button icon="el-icon-refresh" size="small">重置</el-button>
                            </div>
                            <div>
                                <!-- 添加按钮 -->
                                <el-button icon="el-icon-plus" size="small">添加</el-button>
                            </div>
                        </div>
                    </div>
                    <!-- 表格 -->
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="id" label="编号" align="center"> </el-table-column>
                        <el-table-column prop="uname" label="用户名" align="center"> </el-table-column>
                        <el-table-column prop="nick" label="昵称" align="center"> </el-table-column>
                        <el-table-column prop="qq" label="qq" align="center"> </el-table-column>
                        <el-table-column prop="wx" label="微信" align="center"> </el-table-column>
                        <el-table-column prop="phone" label="联系方式" align="center"> </el-table-column>
                        <el-table-column label="启用状态" align="center">
                            <template slot-scope="{ row }">
                                <!-- 开关 -->
                                <el-switch :value="row.state" active-color="#13ce66" inactive-color="#ff4949" disabled> </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ct" label="注册时间" align="center"> </el-table-column>
                        <el-table-column prop="llt" label="最后登录时间" align="center"> </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                        :current-page="currentPage"
                        background
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400"
                    >
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'DemoOne',
    data() {
        return {
            // 系统标题
            title: '后台管理系统',
            // 展开/收起左侧菜单栏
            isCollapse: false,
            dynamicTags: ['首页', '用户管理', '系统设置', '仪表盘', '菜单配置', '权限配置'],
            // 表格标题
            tableTitle: '系统用户信息表',
            // 搜索框内容
            input: '',
            // 数据集合
            tableData: [
                {
                    id: 123,
                    uname: 'user123',
                    nick: '用户user123',
                    qq: '21767269827',
                    wx: 'user123_wx',
                    phone: '13111458716',
                    state: true,
                    ct: '2012-09-18',
                    llt: '2015-04-17'
                },
                {
                    id: 456,
                    uname: 'user456',
                    nick: '用户user456',
                    qq: '31859285726',
                    wx: 'user456_wx',
                    phone: '13987562981',
                    state: false,
                    ct: '2019-03-25',
                    llt: '2021-11-30'
                },
                {
                    id: 789,
                    uname: 'user789',
                    nick: '用户user789',
                    qq: '59280184762',
                    wx: 'user789_wx',
                    phone: '15273849562',
                    state: true,
                    ct: '2015-10-09',
                    llt: '2018-06-21'
                },
                {
                    id: 234,
                    uname: 'user234',
                    nick: '用户user234',
                    qq: '20649283745',
                    wx: 'user234_wx',
                    phone: '13752468391',
                    state: true,
                    ct: '2010-12-05',
                    llt: '2013-08-16'
                },
                {
                    id: 567,
                    uname: 'user567',
                    nick: '用户user567',
                    qq: '49236578104',
                    wx: 'user567_wx',
                    phone: '18637254981',
                    state: false,
                    ct: '2018-06-29',
                    llt: '2020-09-12'
                },
                {
                    id: 890,
                    uname: 'user890',
                    nick: '用户user890',
                    qq: '37591042856',
                    wx: 'user890_wx',
                    phone: '13598267450',
                    state: true,
                    ct: '2013-05-16',
                    llt: '2016-02-27'
                },
                {
                    id: 345,
                    uname: 'user345',
                    nick: '用户user345',
                    qq: '68295741305',
                    wx: 'user345_wx',
                    phone: '15847629103',
                    state: true,
                    ct: '2011-08-22',
                    llt: '2014-05-01'
                },
                {
                    id: 678,
                    uname: 'user678',
                    nick: '用户user678',
                    qq: '93048562714',
                    wx: 'user678_wx',
                    phone: '17659284036',
                    state: false,
                    ct: '2017-02-13',
                    llt: '2019-10-28'
                },
                {
                    id: 901,
                    uname: 'user901',
                    nick: '用户user901',
                    qq: '45927183602',
                    wx: 'user901_wx',
                    phone: '13082941576',
                    state: false,
                    ct: '2016-04-07',
                    llt: '2018-12-19'
                },
                {
                    id: 234,
                    uname: 'user234',
                    nick: '用户user234',
                    qq: '71842053697',
                    wx: 'user234_wx',
                    phone: '15736482950',
                    state: true,
                    ct: '2014-01-12',
                    llt: '2017-07-26'
                }
            ],
            // 当前页数
            currentPage: 4
        };
    },
    methods: {
        // 移除标签的方法
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        }
    }
};
</script>

<style lang="less" scoped>
.tags {
    margin-top: -0.7%;
    .el-tag {
        margin: 0 0.2%;
    }
}

.tableHeader {
    display: flex;
    justify-content: space-between;
    margin: 1.8% 0;
    > div:first-child {
        font-size: 20px;
        letter-spacing: 2px;
    }
    > div:last-child {
        display: flex;
        > div {
            margin: 0 1.5%;
        }
    }
}

.em-logo {
    padding: 16% 0;
    text-align: center;
}

.em-title {
    color: #1890ff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 10% 0;
}

.el-menu--collapse {
    min-height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100%;
}

.el-main {
    background-color: #f0f2f5;
    .el-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 1.8%;
    }
}

.el-aside {
    background-color: #d3dce6;
    width: auto !important;
    overflow: hidden;
}

.el-header {
    background-color: #ffffff;
    border-bottom: 1.5px solid #e5e8eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div:first-child i {
        color: #3a3a3a;
        font-size: 26px;
        cursor: pointer;
    }
    > div:last-child {
        width: 12%;
        display: flex;
        align-items: center;
        .el-avatar {
            cursor: pointer;
            margin-right: 6%;
        }
    }
}

.el-container {
    width: 100vw;
    height: 100vh;
}

.bodys {
    overflow: hidden;
}
</style>

使用Ant Design Vue

Snipaste_2023-06-26_16-35-56.png

  • 3、安装完成后在项目的package.json文件中的dependencies项能看到安装的依赖及版本

Snipaste_2023-06-26_16-37-04.png

  • 4、在main.js中引入Ant Design Vue依赖

Snipaste_2023-06-26_17-07-06.png

  • 5、在布局栏目中，官方已经准备了一个后台布局模板，我们可以直接使用它

Snipaste_2023-06-26_17-04-39.png

  • 6、接下来的演示组件需要请求服务端数据，执行npm i axios -S安装Axios依赖

Snipaste_2023-06-26_17-24-31.png

Snipaste_2023-06-26_17-24-45.png

  • 7、接下来就简单的使用一下组件，里面的所有组件代码都是复制的官方文档的，只修改了样式和内容，写了一个简单的后台界面，效果如下：

Snipaste_2023-06-26_17-49-01.png

  • 8、完整代码如下：
<template>

    <div class="bodys">

        <!-- 内容主容器 -->

        <a-layout id="components-layout-demo-custom-trigger">
            <!-- 左侧菜单栏 -->
            <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
                <!-- 顶部-logo -->
                <div class="logo" v-if="collapsed">
                    <img src="@/assets/logo.png" width="35" height="35" />
                </div>
                <!-- 顶部-标题 -->
                <div class="logo" v-else>{{ title }}</div>
                <!-- 导航菜单 -->
                <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
                    <a-menu-item key="1">
                        <a-icon type="user" />
                        <span>nav 1</span>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <a-icon type="video-camera" />
                        <span>nav 2</span>
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="upload" />
                        <span>nav 3</span>
                    </a-menu-item>
                    <a-menu-item key="4">
                        <a-icon type="upload" />
                        <span>nav 4</span>
                    </a-menu-item>
                    <a-menu-item key="5">
                        <a-icon type="upload" />
                        <span>nav 5</span>
                    </a-menu-item>
                </a-menu>
            </a-layout-sider>
            <!-- 右边部分 -->
            <a-layout>
                <!-- 顶部菜单栏 -->
                <a-layout-header style="background: #fff; padding: 0">
                    <!-- 展开/收起图标 -->
                    <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
                </a-layout-header>
                <!-- 主要部分 -->
                <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                    <div>
                        <!-- 数据表格 -->
                        <a-table
                            :title="tableTitle"
                            :columns="columns"
                            :row-key="(record) => record.login.uuid"
                            :data-source="data"
                            :pagination="pagination"
                            :loading="loading"
                            @change="handleTableChange"
                        >
                            <template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>
                        </a-table>
                    </div>
                    <div>
                        <!-- 文件上传 -->
                        <a-upload
                            name="file"
                            :multiple="true"
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            :headers="headers"
                            @change="handleChange"
                        >
                            <!-- 上传按钮 -->
                            <a-button> <a-icon type="upload" /> 点击上传文件 </a-button>
                        </a-upload>
                    </div>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'DemoTwo',
    data() {
        return {
            // 系统标题
            title: '后台管理系统',
            // 展开/折叠
            collapsed: false,
            // 表格标题
            tableTitle: () => {
                return '用户信息表';
            },
            // 数据内容
            data: [],
            // 表格分页配置
            pagination: {},
            // 加载中
            loading: false,
            // 表格列描述数据对象
            columns: [
                {
                    title: '姓名',
                    dataIndex: 'name',
                    sorter: true,
                    width: '20%',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title: '性别',
                    dataIndex: 'gender',
                    filters: [
                        { text: 'Male', value: 'male' },
                        { text: 'Female', value: 'female' }
                    ],
                    width: '20%'
                },
                {
                    title: '邮箱',
                    dataIndex: 'email'
                }
            ],
            // 设置上传的请求头部，IE10以上有效
            headers: {
                authorization: 'authorization-text'
            }
        };
    },
    mounted() {
        // 调用查询数据的方法
        this.fetch();
    },
    methods: {
        // 上传文件改变时触发的方法
        handleChange(info) {
            if (info.file.status !== 'uploading') {
                console.log('服务端返回的文件信息:{}', info.file, '服务端返回的文件集合信息:{}', info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 文件上传成功`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 文件上传失败`);
            }
        },
        // 查询数据的方法
        queryData(params) {
            return axios.get('https://randomuser.me/api', { params: params });
        },
        // 表格分页、排序、筛选变化时触发的方法
        handleTableChange(pagination, filters, sorter) {
            const pager = { ...this.pagination };
            pager.current = pagination.current;
            this.pagination = pager;
            this.fetch({
                results: pagination.pageSize,
                page: pagination.current,
                sortField: sorter.field,
                sortOrder: sorter.order,
                ...filters
            });
        },
        // 数据业务处理方法
        fetch(params = {}) {
            this.loading = true;
            this.queryData({
                results: 10,
                ...params
            }).then(({ data }) => {
                const pagination = { ...this.pagination };
                pagination.total = 200;
                this.loading = false;
                this.data = data.results;
                this.pagination = pagination;
            });
        }
    }
};
</script>

<style lang="less" scoped>
#components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
    color: #1890ff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    height: 32px;
    margin: 16px;
}

#components-layout-demo-custom-trigger {
    width: 100vw;
    height: 100vh;
}

.bodys {
    overflow: hidden;
}
</style>

结语

至此，两大主流UI你已经入门了，其他组件和功能需自己参照官方文档学习，若有不懂之处可私信我

当你掌握一门语言的时候，再去学其他语言就很容易上手了，学习UI亦是如此

若你遇到特殊的问题，比如UI自身导致的样式、其他细节性问题，需要自己研究UI源码

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END

# Element# Ant Design
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYcgnD9e' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
element-plus自定义主题色-五八三
element-plus自定义主题色
element-plus自定义主题色
2年前 91
vue中，基于element-ui实现简单的文件管理系统-五八三
vue中，基于element-ui实现简单的文件管理系统
vue中，基于element-ui实现简单的文件管理系统
2年前 87
Element 组件库也支持暗黑模式啦-五八三
Element 组件库也支持暗黑模式啦
Element 组件库也支持暗黑模式啦
2年前 52
一文解决vue中菜单再次点击内容不刷新问题-五八三
一文解决vue中菜单再次点击内容不刷新问题
一文解决vue中菜单再次点击内容不刷新问题
2年前 43
二十一.vue3之el-select封装集成-五八三
二十一.vue3之el-select封装集成
二十一.vue3之el-select封装集成
2年前 37
Element 表格多选性能优化-五八三
Element 表格多选性能优化
Element 表格多选性能优化
2年前 25
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐