element UI 和 Vue 搭建的管理员页面

最新推荐文章于 2024-04-09 10:15:57 发布
最新推荐文章于 2024-04-09 10:15:57 发布
阅读量1.1k 收藏 5
点赞数
分类专栏： 实习 文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44659458/article/details/122108372
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
        }
        
        .el-header {
            background-color: #545c64;
            color: #333;
            line-height: 60px;
            padding-left: 0px;
        }
        
        .logo {
            width: 200px;
            line-height: 60px;
            color: #fff;
            font-weight: bolder;
            padding-left: 50px;
            box-sizing: border-box;
            color: #1d953f;
        }
        
        .card-container {
            display: flex;
            height: 80px;
        }
        
        .ava {
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        
        .admin-info h3 {
            margin-left: 24px;
            padding-top: 12px;
            margin-bottom: 12px;
        }
        
        .weather {
            margin-left: 24px;
        }
        
        .cell {
            display: flex;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <div class="logo">车客巴巴</div>
            </el-header>

            <el-container>
                <!--侧边栏-->
                <el-aside width="200px">
                    <el-menu class="el-menu-vertical-demo" default-active="1" style="height: 110vh;" background-color="#545c64" text-color="#fff" active-text-color="#1d953f">
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">常用</span>
                        </el-menu-item>

                        <el-menu-item index="2">
                            <i class="el-icon-s-help"></i>
                            <span slot="title">控制台</span>
                        </el-menu-item>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-view"></i>
                                <span>业务流</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1">
                                    <i class="el-icon-ice-cream-round"></i>
                                    <span slot="title">车辆来源</span>
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    <i class="el-icon-location"></i>
                                    <span slot="title">车辆定级</span>
                                </el-menu-item>
                                <el-menu-item index="3-3">
                                    <i class="el-icon-trophy"></i>
                                    <span slot="title">车辆报价</span>
                                </el-menu-item>
                                <el-menu-item index="3-4">
                                    <i class="el-icon-mouse"></i>
                                    <span slot="title">报价审核</span>
                                </el-menu-item>
                                <el-menu-item index="3-4">
                                    <i class="el-icon-attract"></i>
                                    <span slot="title">过户监控</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="4">
                            <i class="el-icon-scissors"></i>
                            <span slot="title">CRM</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <i class="el-icon-setting"></i>
                            <span slot="title">系统设置</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- 主体 -->
                <el-main>
                    <el-breadcrumb style="margin-bottom: 12px;">
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-card class="box-card" style="margin-bottom: 12px;">
                        <div class="card-container">
                            <el-image :src="src" class="ava">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <div class="admin-info">
                                <h3>早安，管理员，开始您一天的工作吧！</h3>
                                <div class="weather">
                                    <i class="el-icon-heavy-rain"></i>
                                    <span>今日阴转小雨，22℃ - 32℃，出门记得带伞哦。</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card>
                        <el-table :data="tableData" stripe style="width: 100%; ">
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="地址">
                            </el-table-column>
                            <el-table-column prop="ip" label="IP地址">
                            </el-table-column>
                            <el-table-column label="操作" width="200" style="display: flex;">
                                <template slot-scope="scope">
                                    <el-button type="primary" plain>编辑</el-button>
                                    <el-button type="danger" plain>删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="text-align: center;">
                            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
                        </div>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    ip: "192.168.3.2"
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄',
                    ip: "192.168.3.4"
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    ip: "192.168.3.5",
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                    ip: "192.168.3.2"
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    ip: "192.168.3.2"
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄',
                    ip: "192.168.3.4"
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    ip: "192.168.3.5",
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                    ip: "192.168.3.2"
                }]
            }
        },
        methods: {

        }
    })
</script>
</html>

在这里插入图片描述

小美满
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue+Vue-router+ElementUI实现简单的用户管理界面
qq_42337039的博客
08-10 2632
<template> <el-row class="tac"> <el-col :span="24"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" unique-opened router backgr
vue-eden:管理员管理系统模板
03-11
项目停止维护于2018年11月16日 Vue Eden是一个美观的后台管理系统/集成方案，简称伊甸园。 。这认为理解Eden结构代码并修改都变得十分友好，代码有参考vue-element-admin。 此项目主要使用了vue，vuex，vue-router，element-ui，stylus进行开发。大型库。所以例如富文本编辑器，excel处理等功能需要手动添加。登陆页面参考vue-manager，部分代码参考vue-element-admin。 可以进查看 目录结构 一些说明：使用了vue-svg-icon组件，SVG图标放在SVG目录中。而主题色使用了官方推荐的生成的一套css直接在main.js中覆盖，当然你也可以通过修改使用其他方式动态更改主题色等。请求类替换了axios，并且将请求方法逻辑分离放置在api目录下。 . ├── LICENSE ├── README.md ├──
如何在前后端一体的项目中引入element-ui，即引入index.js、index.css等文件。
最新发布
qq_42371932的博客
04-09 502
然后是需要tff和woff ，这2个文件是图标文件，也是必须的，不然会出现方框BUG等情况。24年接手了一个18年的项目，想使用el-ui的组件库，得自己手动引入。这里，因为需要添加tff和css之间的联系，需要修改css文件内容。打开保存的css文件搜 @font-face 修改成如下路径。随后，在自己的文件里面添加这4个文件，我的目录如下所示。接着，就可以在html文件里使用el组件了，例如。添加完后，最后还需要在html文件里引入。通过官网可以知道，首先得准备以下文件。
ElementUI从unpkg.com下载到本地方法指南以及配置Nginx本地服务器镜像
热门推荐
卡农的魔笛
05-17 2万+
element-ui 是一款非常好用的前端框架。 我们今天谈的是不用前端构建框架，而直接引用 element-ui。 在官网指南中，官方建议使用 cdn 来使用：https://element.eleme.cn/#/zh-CN/component/installation <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!--
vuejs 和 element 搭建的一个后台管理界面
weixin_42429288的1博客
10-30 359
点击查看老陈的博客
Vue + ElementUi 管理系统页面制作步骤 2021-6-29
前端工程师的修炼笔记
08-05 1589
管理系统页面制作步骤 登录/退出功能 登录概述 1.登录业务流程 在登录页面输入用户名和密码 调用后台接口进行验证 通过验证之后，根据后台的响应状态跳转到项目主页 2.登录业务的相关技术点 http 是无状态的 通过cookie在客户端记录状态（不跨域推荐） 通过session在服务器端记录状态（不跨域推荐） 通过token方式维持状态 (存在跨域使用） 3.登录功能实现 路有导航守卫控制访问权限 如果用户没有登录，但是直接用过url访问特定页面，需要重新导航到登录页面 //为路由对象 添加 befor
通过element写一个控制台展示复制功能
江南烟雨
04-07 423
vue写控制台
基于Vue+element设计 经典网站后台管理界面
有勇气的牛排博客
02-10 1257
<template> <el-container> <el-header height="" > <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" tex
基于ElementUI和Vue的控制台项目实战
weixin_45656377的博客
12-10 705
七牛云（对接第三方服务接口） Quarz
Vue实现自动化平台（三）--实现项目管理页面
喵酱
04-03 1668
Vue实现自动化平台（三）
使用vuejs2.0和element-ui 搭建的一个后台管理界面
weixin_34306676的博客
04-17 346
说明： 　　这是一个用vuejs2.0和element-ui搭建的后台管理界面。 相关技术： 　　vuejs2.0：一套构建用户界面的渐进式JavaScript框架，易用、灵活、高效。 　　element-ui：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库。 　　vue-router：前端路由，用Vue.js + vue-router 创建单页应用(SPA...
基于Vue和Element-Ui搭建项目的方法
10-16
主要介绍了基于Vue和Element-Ui搭建项目的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue + Element UI从头搭建企业级后台管理页面框架
06-30
从头开始搭建vue admin页面框架，各个页面布局组件的开发，以及核心功能：登录认证、动态生成菜单、路由，菜单管理，为企业级菜单权限管理平台提供定制化解决思路。
搭建element-ui的Vue前端工程操作实例
11-27
一、安装npm镜像 （1）下载node.js， 配置node.js的...（1）npm install -g vue-cli 回车，验证是否安装成功，在命令行中输入vue，出来vue的信息说明安装成功 三、全局安装 vue-cli （1）npm install –global vue-c
Vue + Element-ui后台管理系统模板.zip
06-04
Vue + Element-ui搭建后台管理系统模板 详情参考博文：https://blog.csdn.net/u012967771/article/details/117550149
vuejs管理系统模板_2020年22种最佳VueJS管理员仪表板模板
cuk5340的博客
07-30 2795
vuejs管理系统模板 VueJS管理模板 (VueJS Admin Templates) Hello,VueJS has been getting more and more popular among web developers building optimized interfaces, focused on good UX. The great thing about VueJS adm...
管理员界面html,12套超酷的后台管理员界面网站模板
weixin_30044149的博客
06-10 7876
这些超棒的网站模板可以直接应用到其它开源CMS (例如，wordpress，magento等等)，同时您可以很方便的自定义。虽然管理员界面使用的数量相对用户界面并不多，但是专业的管理员界面网站模板要求更好的使用性和用户体验，并不是简单的设计。今天这套分享的模板相信能够带给大家超棒的体验！这套网站模板使用Twitter Bootstrap开发。拥有9个不同的皮肤主题并且包含了常用的输入组件，例如，表...
vue项目使用element-UI制作管理系统基本框架（包括菜单折叠，菜单条目路由跳转）
weixin_45711931的博客
04-29 1904
创建首页indexpage.vue文件，内容如下（其他菜单条目页面创建方法一致，内容自己完善）步骤二：引用element-ui（局部引用）和路由模块。在router文件夹下的index.js中设置路由。在main.js文件中按需引用你要使用的组件。步骤三：创建编写主页面home.vue。步骤一：安装element-UI。步骤四：创建菜单条目页面并设置路由。
【 Element UI 】—Element UI 的基本使用
道阻且长，行则将至。
10-15 310
Element-UI的基本使用 一、基于命令行的方式手动安装 npm 安装 npm i element-ui -S CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --
element ui+vue后台管理模板下载
10-25
Element UI 是一款基于 Vue.js 的前端框架，它提供了一套丰富的UI组件库，可以帮助我们快速构建漂亮、可交互的后台管理系统。而Element UI 的后台管理模板则是在这个框架的基础上搭建出来的，它包含了一套完整的页面布局和常用的功能组件，可以作为我们开发后台管理系统的基础模板。 如果想要下载 Element UI Vue 后台管理模板，可以通过以下几种方式来获取： 1. Element 官网：Element 官网提供了 Element UI 的官方文档和示例，我们可以在官网的下载页面找到后台管理模板的下载链接，点击下载即可。 2. GitHub：Element UI 的后台管理模板在 GitHub 上有开源的版本，我们可以直接在 GitHub 上搜索 Element UI 后台管理模板，并找到相应的仓库。在仓库页面，可以点击 "Clone or Download" 按钮，选择 "Download ZIP" 来下载整个项目文件。 3. NPM：Element UI 后台管理模板也可以通过 NPM 下载和安装。我们可以在命令行中使用 npm 命令，执行下述命令来下载模板： ``` npm install element-ui admin-template ``` 不论从哪种方式获取到了 Element UI Vue 后台管理模板，我们在进行开发时都可以根据自己的需求进行修改和定制，以适应不同的项目要求。同时，Element UI 社区也提供了丰富的插件和主题，可以进一步增强和美化我们的后台管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小美满

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值