修改vue-element-admin左侧导航栏的图标

简介: 修改vue-element-admin左侧导航栏的图标

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。


今天就来说一下,怎使用这个模板,以及写好了项目,怎么样把项目打包成静态文件,部署在服务器上。

1:去github上面下载或者克隆

我这里使用简单粗暴的方式,直接下点击载按钮


2:把项目导入vscode,点开终端,并且在项目里面安装依赖。

npm install --registry=https://registry.npm.taobao.org


建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

安装完成会发现项目目录中多了一个依赖文件夹

3:运行本地开发 启动项目

npm run dev

4:浏览器打开

运行成功就使用浏览器打开

可以在这个后台管理系统的模板的基础上,修改一些自己需要的代码,变成自己的开发的项目了,此处自行发挥,省略一万字。

修改vue-element-admin左侧导航栏的图标

1:打开阿里矢量图标库https://www.iconfont.cn/

选择一个图标下载



选择下载格式给svg的格式

2:

把我们下载的icon图标的index.svg文件复制到/src/icons/svg文件夹下


3:打开src/router/index.js

在meta:{ icon}中引入即可。



4:

可以看到我从阿里矢量下载下来的图标,已经放到左侧导航栏的图标上去了~~

相关文章
|
数据可视化 测试技术
深入理解软件测试中的风险评估方法
【4月更文挑战第19天】 在软件开发的生命周期中,风险评估是确保产品质量和项目成功的关键步骤。本文将探讨几种常用的软件测试风险评估方法,包括定性分析和定量分析,并讨论它们在不同类型的测试环境中的应用。通过案例研究和最佳实践,我们将展示如何有效识别、评估和管理测试过程中可能遇到的风险,以及如何制定相应的缓解策略,以优化资源分配和提高测试效率。
1044 0
|
6月前
|
关系型数据库 MySQL 数据库
阿里云数据库RDS收费价格:最新MySQL、SQL Server、PostgreSQL和MariaDB收费标准
阿里云RDS数据库支持MySQL、SQL Server、PostgreSQL和MariaDB,多种引擎任选。基础版优惠价低至88元/年,如MySQL倚天版1核2G仅需88元,SQL Server 2核4G 299元/年,PostgreSQL 2核4G 227元/年,高性价比,弹性可扩展,安全稳定,详情可查官方活动页面。
926 1
|
6月前
|
安全
HTTP协议中请求方式GET 与 POST 什么区别 ?
简介:项目开发中常见GET与POST请求方式,主要区别在于参数传递位置、大小限制及安全性。GET用于获取数据,参数在URL中;POST用于提交数据,参数在请求体中,更安全。现代项目多采用RESTful风格,通过URL定位资源,不同请求方式(GET/POST/PUT/DELETE)对应不同操作,提升接口规范性与可读性。(238字)
|
资源调度 JavaScript API
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
这篇文章介绍了如何在vue-element-admin项目中引入并封装ECharts组件,以及如何实现折线图、柱状图和饼图的展示。
1770 4
vue-element-admin 综合开发五:引入 echarts,封装echarts 组件
|
Android开发 iOS开发 API
鸿蒙开发:适配系统深浅色模式
无论是Android还是iOS,在系统设置中,都有着深色和浅色两种外观模式,同样,鸿蒙系统中也存在这样的外观切换,如何让自己的应用,跟随着系统的模式进行动态切换呢?目前系统给我们提供了两种方式可以实现,一种是资源形式,一种是动态的代码形式。
528 15
鸿蒙开发:适配系统深浅色模式
|
Ubuntu Linux
Linux服务器的自动启动可以在哪里进行配置?
Linux服务器的自动启动可以在哪里进行配置?
531 3
|
供应链 安全 搜索推荐
Web3医疗科技之数字健康管理的创新前沿
Web3作为新一代互联网技术的代表,不仅在金融和供应链等领域展现了巨大的潜力,也在医疗科技方面带来了前所未有的创新。
517 3
|
前端开发 JavaScript
【node写接口】 通过node 快速搭建一个服务器、get请求、post请求 小白入门
【node写接口】 通过node 快速搭建一个服务器、get请求、post请求 小白入门
882 4
|
JSON 前端开发 JavaScript
前端如何实现跨域
前端如何实现跨域
545 0
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径