[vue-element-admin]设置icon+浏览器+侧边栏等图标、标题

最新推荐文章于 2024-05-10 10:19:31 发布
最新推荐文章于 2024-05-10 10:19:31 发布
阅读量1w 收藏 47
点赞数 12
分类专栏： vue-element-admin 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013998349/article/details/110231663
版权

vue-element-admin中设置icon+浏览器+侧边栏等图标、标题

一、设置图标ICON：

1、引入图标ICON：

https://www.iconfont.cn/
可以到https://www.iconfont.cn/上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。
在这里插入图片描述

2、使用步骤

（1）.src/router/index.js

直接在meta: { title: ‘主页’, icon: ‘dashboard’ }的icon后面输入icon的名字就行。
在这里插入图片描述

参考资料：

https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E7%94%9F%E6%88%90%E5%9B%BE%E6%A0%87%E5%BA%93%E4%BB%A3%E7%A0%81

二、设置浏览器图标和文字：

如下面效果：
在这里插入图片描述

1、设置浏览器图标

图标：public文件夹下的index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--浏览器的图标-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to c
最低0.47元/天 解锁文章
骨月
关注
  • 12
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue-element-admin 集成框架设置中文语言
11-10
在"vue-element-admin 集成框架设置中文语言"这个主题中，我们主要讨论如何在vue-element-admin项目中实现中文语言的集成。Element UI本身提供了多语言支持，包括中文，因此在vue-element-admin中设置中文语言并不...
【Vue】更换vue-element-admin左侧 logo
最新发布
weixin_47375144的博客
05-10 316
更换 vue-element-admin 左侧logo
vue-element-admin项目中，icon、svg图标的使用
笑到世界都狼狈的博客
02-06 4005
在vue-element-admin中使用svg图片，下载svg图片，文件夹中查看svg图片
从vue-element-admin框架中，学习如何优雅地使用icon
qq_26780317的博客
09-18 1965
前言： 本文主要记录一下，从vue-element-admin框架中，学习到使用icon的经验。希望以后，可以运用到自己的项目中。 一、前端icon的发展史       在远古时代，大部分图表都是用img来实现的。这样会使一个页面的请求资源中，图片img占了大部分，为了优化有了image sprite就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用css的background-position定位显示不同的icon图标。  &nbs
修改vue-element-admin 中侧边栏图标
L_csdn123的博客
01-14 1570
情景： 原本的vue-element-admin模板上图标太少，我想再引入几个，我按照网上方法去iconfont官方库里去下载svg的图片然后放到src/icons/svg目录下面，显示了是显示了，但是比正常的图标尺寸小，修改大小也不好修改 解决办法： 我把展示的svg换成elementUI库里的图标 1 找到这个目录下的这个vue 文件 2 注释掉这行代码，代表只选用icon的图标不会用svg的 3 这样我们在使用图标的时候只用写icon的名字即可，比如 { path:'/home', comp
[element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息
qq_14993591的博客
10-31 4302
在el-table-column中绑定:render-header=“renderPrice”只是单纯的想在table中添加图标和tooltip。使用组件插槽，elementui已封装好。
【Abp VNext】实战入门（五）：【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制
刘永洪的博客
02-28 3457
一、前言： 使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小，今天就记录一下如何操作。 二、操作步骤： 去阿里图标库查找需要的图标，然后下载对应的SVG文件：www.iconfont.cn 把.svg文件拷贝到项目根目录：icons/svg 在路由router/index.js 中配置新增的svg图标名：meta:{icon:‘home’} 这样处理后已经可以在左侧菜单中显示对应图标了，但是有三个问题要解决： 自定义图标太小不受控制：自定义图
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-element-admin:基于vue+elementUI的后台管理系统模板
05-30
vue-element-adminA Vue.js projectBuild Setup# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for ...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
修改vue-element-admin侧边栏图标颜色
weixin_43743148的博客
03-16 2138
vue-element-admin快速开发后台系统模板
[element-ui] el-tabs 右侧有个小图标，当el-tabs内容多，el-tabs的左右箭头出现，右侧图标显示；否则右侧不显示小图标
qq_14993591的博客
06-19 833
如果拿不到.tab-inner，可以用setTimeout等一下。
【Vue】vue项目网页标题栏ico小图标修改调整
weixin_46368797的博客
05-09 2807
找到index.html文件，将link标签中的图标路径名favicon.ico改成logo.jpg（png格式同理）将logo图片文件复制到public文件夹中。刷新网页，图标更新成功。
vue项目，通过列表编辑动态实时配置项目名称、项目图标？
SM_Cute的博客
07-05 732
vue项目，通过列表编辑动态实时配置项目名称、项目图标？
vue-element-admin 项目更换浏览器图标与标头
Dragon
05-30 2526
1、先看我的图标与标头 2、这个修改的话如下图所示（这个意思就是，如果前边的 defaultSettings.title 没有找到的话就会显示后边的，前边的 title 可以按住 Ctrl 光标放上去单击鼠标左键跟踪过去进行修改） 3、图标的话就在 publick 目录下（将自己喜欢的图片放到 public 目录下，然后将 href 后的进行更改就可以了） ...
vue-element-admin之修改侧边栏的icon图标以及图标颜色
热门推荐
Fxhani的博客
06-11 1万+
1.修改侧边栏的icon图标 ???? 如果在admin提供的icon库中没有你需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 在admin指南中可以看到这句话，我们来实际操作一波 打开网址后，可以看到 在图标库里可以搜索我们需要的图标 搜索之后，点击下载，就下载到我们的文件夹中了，可以在文件中找到它，给它重命名 打开我们的项目只要把它复制到icon中的svg下面，就有我们自己的图标了 引入即可 2.修改图标的颜色，随着点击的字体颜色改变
使用element tabel表头动态添加icon
记不住代码的前端混子
08-07 817
主要通过 slot=“header” 插槽实现表头的icon
vue-element-admin侧边栏
05-09
Vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统解决方案。它提供了许多常用的后台管理功能和组件，包括侧边栏、面包屑导航、表格、表单、图表等等。 侧边栏是 Vue-element-admin 中的一个重要组件，它通常用于展示系统的菜单和功能项。在 Vue-element-admin 中，侧边栏是通过路由配置来生成的。 在路由配置中，每一个路由配置项对应着一个菜单项。菜单项包括菜单的标题、图标、路径、子菜单等信息。当用户点击菜单项时，就会跳转到对应的路由页面。 以下是一个简单的示例，演示如何使用 Vue-element-admin 的侧边栏组件： ```javascript // 路由配置 const routes = [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] } ] // 侧边栏组件 <template> <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse"> <template v-for="(item, index) in menuList"> <el-submenu v-if="item.children" :key="index" :index="index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </template> <template v-for="(subItem, subIndex) in item.children"> <el-menu-item :key="index + '-' + subIndex" :index="index + '-' + subIndex" @click="handleMenuClick(subItem)"> <i :class="subItem.icon"></i> <span slot="title">{{subItem.title}}</span> </el-menu-item> </template> </el-submenu> <el-menu-item v-else :key="index" :index="index" @click="handleMenuClick(item)"> <i :class="item.icon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </template> </el-menu> </template> <script> export default { props: { menuList: { type: Array, required: true }, activeIndex: { type: String, required: true }, isCollapse: { type: Boolean, required: true } }, methods: { handleMenuClick(item) { this.$emit('menu-click', item) } } } </script> ``` 在这个示例中，路由配置包含了三个路由项，分别对应 Dashboard、Table 和 Tree 三个菜单项。侧边栏组件则使用了 Element UI 中的 Menu 组件来展示菜单项。侧边栏组件的主要作用是传递菜单项列表、当前选中的菜单项和侧边栏是否折叠等参数，以及监听菜单项的点击事件。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值