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

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

相关文章
|
8月前
|
前端开发 JavaScript 程序员
修改vue-element-admin左侧导航栏的背景颜色
修改vue-element-admin左侧导航栏的背景颜色
152 0
|
10月前
|
JSON 前端开发 JavaScript
【Element-UI】Mockjs及案例首页导航、左侧菜单
Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口,用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据,并且可以设置数据的类型、格式和规则,从而模拟真实的数据响应。Mock.js支持生成随机数据拦截Ajax请求以返回模拟数据支持RESTful API风格等功能,能够提高前端开发效率,并且减少对后端接口的依赖。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
|
9天前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
2月前
vue-element-admin—登录页面添加自定义背景
vue-element-admin—登录页面添加自定义背景
203 0
|
8月前
|
JavaScript
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
vue2.0 + element-ui 实战项目-点击按钮弹出form表单(五)
382 0
|
2月前
uniapp项目怎么删除顶部导航栏
uniapp项目怎么删除顶部导航栏
43 0
|
7月前
vue2实现后台管理系统的侧边栏切换子页面
vue2实现后台管理系统的侧边栏切换子页面
67 0
|
8月前
vue2.0 + element-ui 实战项目-导航栏跳转路由(二)
vue2.0 + element-ui 实战项目-导航栏跳转路由(二)
71 0
|
8月前
|
JavaScript
Vue框架Element UI教程-左侧导航栏(四)
Vue框架Element UI教程-左侧导航栏(四)
143 0
|
8月前
|
JavaScript
Vue框架Element UI教程-导航栏跳转路由(五)
Vue框架Element UI教程-导航栏跳转路由(五)
49 0