修改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:

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

相关文章
|
前端开发 JavaScript 数据安全/隐私保护
详解React antd中setFieldsValu的简便使用
详解React antd中setFieldsValu的简便使用
519 0
|
12月前
|
JavaScript 容器
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
这篇文章详细介绍了如何使用Vue和Element UI搭建一个后台管理系统,包括首页布局、侧边栏、样式调整、菜单和路由配置,以及解决开发中遇到的问题。
1005 1
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
255366 0
|
12月前
|
资源调度 JavaScript
vue-element-admin 综合开发三:header组件的实现、vuex的使用、main组件(home页面)的实现
这篇文章介绍了如何实现一个Vue.js项目中的header组件,使用Vuex进行状态管理,以及创建一个main组件(home页面),并讨论了一些开发中遇到的bug。
369 0
|
12月前
|
SQL 关系型数据库 MySQL
乐观锁在分布式数据库中如何与事务隔离级别结合使用
乐观锁在分布式数据库中如何与事务隔离级别结合使用
|
Java Maven
idea中maven项目pom文件Could not acquire lock(s)
idea中maven项目pom文件Could not acquire lock(s)
7866 2
|
11月前
|
SQL 安全 PHP
PHP开发中防止SQL注入的方法,包括使用参数化查询、对用户输入进行过滤和验证、使用安全的框架和库等,旨在帮助开发者有效应对SQL注入这一常见安全威胁,保障应用安全
本文深入探讨了PHP开发中防止SQL注入的方法,包括使用参数化查询、对用户输入进行过滤和验证、使用安全的框架和库等,旨在帮助开发者有效应对SQL注入这一常见安全威胁,保障应用安全。
428 4
|
存储 关系型数据库 MySQL
MySQL 的核心技术有哪些?
MySQL 是一种广泛使用的关系型数据库管理系统,以下是一些 MySQL 的核心技术: 1. **存储引擎**:MySQL 支持多种存储引擎,如 InnoDB、MyISAM 等。存储引擎负责数据库的存储和检索,不同的存储引擎具有不同的特点和适用场景。 2. **索引技术**:索引是提高数据库查询性能的重要手段。MySQL 支持多种类型的索引,如 B-Tree 索引、哈希索引等,通过合理地创建和使用索引,可以大大提高查询的速度。 3. **事务处理**:MySQL 提供了事务处理的功能,保证了数据库操作的原子性、一致性、隔离性和持久性。事务可以确保一组相关操作要么全部成功,要么全部失败,从而保证
474 0
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
Element UI 上传文件 el-upload —— 手动上传文件,限制上传文件数量,文件类型校验等
3328 0