先看下页面截图,在线演示地址http://aliadmin.zengjielin.top

下面有开源的代码

页面分成三大部分头部,头部菜单栏,侧边菜单栏,右侧内容栏。

现在我们担心的是怎么使用侧边栏。

我们先克隆我们的项目到本地

然后进入我们的项目,安装项目依赖

运行我们的项目,然后浏览器打开http://localhost:8080/#/

我们打开编译器,只需要修改下面数据即可以为你们项目所用了

我们打开CloudSideBar.vue的一个文件,修改data()里面的数据

结合页面效果,你们仔细观察一下就知道怎么写了,这里我就不做太多描述。

现在修改menuArr的内容就可以达到你们自己的列表了,注意一下几点,给菜鸟的警告。

menuList里面的元素必须包含main_menu_id,而且必须从0开始,每一个元素递增。

然后submenuList里面的元素必须包含submenuID,而且必须1开始,每一个元素递增。

以上几点必须注意,否则不发达到效果。

附上码云托管的开源项目代码:https://gitee.com/zengjielin/aliyun_admin

关于项目用的图标,我是用了阿里巴巴图标库的图标

下面可以教一下你们使用,

进入阿里巴巴图标库网站http://www.iconfont.cn/

然后搜索你想要的图标

然后选一个你需要的图标加入个购物车

然后我们去到右上角找到购物车的图标将我们的图标放到项目上

然后我们会跳到我们图标所在的项目中,注意红色框框的部分,一个是fontclass,我们要选中它,然后图标的下方会出现一些ico-开头的一些类名,我们要用到。

然后是另外一个叫我们更新代码,我们点击它。

会生成新的连接,我们复制连接到我们本地项目的index.html下,就可以了。

然后我们把对应的图标写在下面红色框框的地方即可。

项目是开源的,可以随便玩,转发请标注原著,尊重作者。

vue仿阿里云后台管理(附加阿里巴巴图标使用)的更多相关文章

  1. 仿阿里云后台管理界面模板html源码——后台

    链接:http://pan.baidu.com/s/1nuH2SPj 密码:ar8o

  2. vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法

    首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...

  3. jQuery仿阿里云购买选择购买时间长度

    效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...

  4. 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍

    微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...

  5. 阿里云代码管理平台 Teambition Codeup(行云)亮相,为企业代码安全护航

    2019杭州云栖大会企业协作与研发效能专场,企业协同平台Teambition负责人齐俊元正式发布阿里云自研的代码管理平台Teambition Codeup(行云),Codeup是一款企业级代码管理产品 ...

  6. 使用Docker快速搭建Halo个人博客到阿里云服务器上[附加主题和使用域名访问]

    一.前言 小编买了一个服务器也是一直想整个网站,一直在摸索,看了能够快速搭建博客系统的教程.总结了有以下几种方式,大家按照自己喜欢的去搭建: halo wordpress hexo vuepress ...

  7. vue,vuex的后台管理项目架子structure-admin,后端服务nodejs

    之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能 接下来,针对structure-admin-web的不足,进行了补充,开发了具有登 ...

  8. 使用阿里云cli管理安全组

    相比于python SDK方式,阿里云基于GO SDK开发了一整套CLI工具,可以通过调用RPC API来管理云资源,对编程能力不够的人来说是个福音. 而且,阿里云CLI的文档比SDK的文档更加全面, ...

  9. 8.仿阿里云虚拟云服务器的FTP(包括FTP文件夹大小限制)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#iis 原文:http://dnt.dkill.net/Ar ...

随机推荐

  1. 什么是lease机制?

    分布式系统理论之租约机制学习 一,租约机制介绍 在分布式系统中,往往会有一个中心服务器节点.该节点负责存储.维护系统中的元数据.如果系统中的各种操作都依赖于中心服务器上的元数据,那么中心服务器很容易成 ...

  2. nginx代理证书使用方法

    一.证书购买 一般情况,申请证书时需要添加DNS解析,具体的步骤一般运营商都会给予详细说明.当然,也需要填写证书保护的处理的域名,一般非免费的证书可以支持多个域名处理,免费的一般只能支持一个域名的设置 ...

  3. 解读sam格式文件

    1,SAM文件格式介绍 SAM(The Sequence Alignment / Map format)格式,即序列比对文件的格式,详细介绍文档:http://samtools.github.io/h ...

  4. rsync快速部署记录

    rsync快速部署记录 安装rsync和使用环境:客户端:10.192.30.59 fudao_db_cluster_002 (将本地文件备份到服务端)服务端:10.192.30.60 fudao_d ...

  5. springboot项目作为其他项目子项目

    <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apache.org/P ...

  6. Node.js之querystring模块

    querystring从字面上的意思就是查询字符串,一般是对http请求所带的数据进行解析.querystring模块只提供4个方法,在我看来,这4个方法是相对应的. 这4个方法分别是querystr ...

  7. 解决IDEA Initialization error 'https://start.spring.io'

    IDEA Initialization error  'https://start.spring.io'     弹出一个error窗口    就是不能连接https://start.spring.i ...

  8. 【知识】location.search获取中文时候会被编码成一串字符

    [转码] 例如:case.html?id='这个是页面的标题' 当想要使用location.search获取?id='这个是页面的标题'的时候,包含的中文会被编码成一串字符串. 所以我们需要进行解码, ...

  9. Oracle报Ora01522

    应用服务报错截图 数据库后台日志报错截图 从日志分析应该是回滚异常造成表空间无法使用回滚段,而回滚涉及的表空间为undo表空间 尝试新建UNDO表空间,再将UNDO_TABLESPACE切换到新建的U ...

  10. [CSP-S模拟测试]:椎(线段树维护区间最值和单调栈)

    题目描述 虽不能至,心向往之. $Treap=Tree+Heap$ 椎$=$树$+$堆 小$\pi$学习了计算机科学中的数据结构$Treap$. 小$\pi$知道$Treap$指的是一种树. 小$\p ...