若依RuoYi框架log图标与文字怎么改?

news2025/2/26 1:22:25

文章目录

  • 1.若依修改主界面图标
  • 2.若依修改主界面文字
  • 3.若依修改页面上方图标
  • 4.若依修改页面上方文字
  • 5.若依登录页面文字修改
  • 6.免费图片转换网站

1.若依修改主界面图标

在这里插入图片描述

图片路径: /src/assets/logo/logo.png

直接将想要替换的png格式图片将其替换即可,图片大小建议为60*60

2.若依修改主界面文字

在这里插入图片描述

文件路径:/src/layout/components/Sidebar/Logo.vue
// js部分
<script>
import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'

export default {
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    variables() {
      return variables;
    },
    sideTheme() {
      return this.$store.state.settings.sideTheme
    }
  },
  data() {
    return {
      title: '若依管理系统',  <-- 将其改为想要的标题即可
      logo: logoImg
    }
  }
}
</script>

3.若依修改页面上方图标

在这里插入图片描述

图标路径:/public/favicon.ico

直接替换即可,推荐尺寸64*64

4.若依修改页面上方文字

在这里插入图片描述

文件目录:
/.env.development
/.env.production
/.env.staging
推荐全部修改,因为根据环境不同
//.env.development

# 页面标题
VUE_APP_TITLE = 若依管理系统           <-- 修改此处

# 开发环境配置
ENV = 'development'

# 腾逸商城管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

5.若依登录页面文字修改

在这里插入图片描述

文件路径:/src/views/login.vue
// login.vue

<h3 class="title">若依后台管理系统</h3>  //找到此标签修改即可

6.免费图片转换网站

https://www.aconvert.com/cn/image/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405446.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识&#xff0c;以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程&#xff0c;也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期&#xff0c;也就是从开始创建、初…

vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg

前言&#xff1a; 好久没有写vue了。今天遇到一个需求&#xff1a;使用input框来上传图片类型&#xff0c;并且在选择之后立刻回显出来。使用< input type“file”/>在选定图片后再< img src“xxx”/>。今天在实现这个需求的时候主要是出现了三个问题&#xff1a;…

分享 6 个 Vue3 开发必备的 VSCode 插件

今天分享 6 个 Vue3 开发必备的 VSCode 插件&#xff0c;可以直接用过 VSCode 的插件中心直接安装使用。 如果有觉得有帮助&#xff0c;还请点赞&#x1f44d;支持一下~ 1. Volar &#x1f525; 下载数 153 万 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生&…

40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

当下前端开发可以说是一个比较火的职业&#xff0c;所以学习的人比较多&#xff0c;不管是培训还是自学都是希望通过前端可以找到一份好的工作&#xff0c;但是很多自学的朋友在自学过程中有些盲目&#xff0c;不仅大大降低了学习的效率&#xff0c;而且也会打击自己的学习热情…

使用nvm安装node

常用命令 NVM的常用命令如下&#xff1a;nvm list available&#xff1a;查看可在线安装的NodeJS版本nvm ls&#xff1a;列出所有已经在NVM中安装的NodeJS版本。nvm current&#xff1a;显示当前正在使用的Node版本。nvm install xx.xx.xx&#xff1a;在NVM中在线安装指定版本的…

nvm安装步骤及使用方法

一、nvm说明 nvm 主要是用来管理 nodejs 和 npm 版本的工具&#xff0c;可以用来切换不同版本的 nodejs。 二、nvm下载 https://github.com/coreybutler/nvm-windows/releases 三、nvm安装 1.解压缩后点击exe文件进行安装 2、点击next&#xff0c;选择nvm安装路径&#xf…

Vue:vue3中封装Axios请求

解决、 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、创建文件夹存放封装好的js二、封装代码三、配置四、在需要的组件中使用总结前言 这篇文章直接能够在项目中使用&#xff0c;没有解释什么东西&#…

安装运行vue-element-admin的报错问题-解决办法

一、原本的安装方法-出错 官网安装链接如下&#xff1a; https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85 我遇到的报错主要在以下阶段&#xff1a; 按上方安装链接里git clone后npm install无法安装npm install完成后无法启动&#xff0…

vue中的proxy代理的使用(解决跨域问题)

声明 1. 首先我们应该知道&#xff0c;前端axios在本地发送的请求如果你不把路径写全&#xff0c;它都是会默认加上自己项目所在的端口&#xff0c;就比如说&#xff1a; axios.get(/login) axios.get(/hello) 当我点击发送按钮之后&#xff0c;以上两行代码实际为&#xff1a;…

使用alist将云盘映射为WebDAV

使用alist将云盘映射为WebDAV1. 下载2. Windows系统安装与配置2.1 alist 启动与配置2.2 添加启动与关闭的脚本2.3 开机启动3. Linux系统安装与配置3.1 alist 启动与配置3.2 守护进程​4. 测试 WebDAValist是一款开软的将网盘及本地硬盘映射到网络端的软件&#xff0c;支持多种存…

【Web前端】怎样用记事本写一个简单的网页-html

前言 出于对网站的一些突然的兴趣&#xff0c;我开始了解网页是如何被设计出来的。 作者水平有限&#xff0c;如有问题&#xff0c;欢迎指出。 文章目录前言一. 对网页设计的基本了解1. 网站2. 网页编辑工具1&#xff09;语言2&#xff09;软件二. 第一个网页1. 实操——用记事…

watch跟computed的区别

大家好,我是大帅子,今天给大家讲一下watch跟computed的区别,下面我们直接开始吧 功能上&#xff1a;computed是计算属性&#xff0c;watch是监听一个值的变化&#xff0c;然后执行对应的回调。 是否调用缓存&#xff1a;computed中的函数所依赖的属性没有发生变化&#xff0c;…

【Web 安全】XSS 攻击详解

文章目录一、XSS 攻击概述二、XSS 攻击原理1. XSS的攻击载荷&#xff08;1&#xff09; script 标签&#xff08;2&#xff09; svg 标签&#xff08;3&#xff09; img 标签&#xff08;4&#xff09;body 标签&#xff08;5&#xff09; video 标签&#xff08;6&#xff09;…

VUE框架

1 概述 VUE是一款前端框架&#xff0c;免除了JavaScript中的DOM操作&#xff0c;简化书写 在JavaScript中有很多没有逻辑的繁琐的重复操作&#xff0c;如下 而VUE改善了这个问题&#xff0c;简化了DOM书写。 VUE是基于MVVM(Model-View-ViewModel)思想&#xff0c;实现数据的…

新一代状态管理工具 -- Pinia 上手指南

一&#xff1a;Pinia简介和五大优势 Pinia是vue生态里Vuex的替代者&#xff0c;一个全新的vue状态管理库。在Vue3成为正式版以后&#xff0c;尤雨溪强势推荐的项目就是Pinia。 那先来看看Pinia比Vuex好的地方&#xff0c;也就是Pinia的五大优势。 可以对Vue2和Vue3做到很好的支…

5个前端练手项目(html css js canvas)

前言&#xff1a; 首先祝大家端午节快乐。本篇文章有5个练手项目 对于刚学完前端三剑客的你们。应该是一个很好的实践 目录 &#x1f969;.跑马灯 1.1效果图&#xff1a; 1.2思路解析 1.3源码 &#x1f367;.彩虹爱心 2.1效果图 2.2思路解析 2.3源码 &#x1f32e;.闹钟…

vue中this.$set()的用法

1、this.$set()的作用 向响应式对象中添加一个属性&#xff0c;并确保这个新属性同样是响应式的&#xff0c;且触发视图更新。 this.$set()用于向响应式对象上添加新属性&#xff0c;因为 Vue 无法探测普通的新增属性。 简单来说&#xff1a;就是我们在methods中给数据添加了一…

尚品汇项目笔记

尚品汇项目笔记git代码地址前端Vue核心1、vue文件目录分析2、项目配置3、组件页面样式4、清除vue页面默认的样式5、pages文件夹6、footer组件显示与隐藏7、路由传参8、多次执行相同的push问题9、定义全局组件10、代码改变时实现页面自动刷新11、Home首页其它组件12、封装axios1…

微信小程序实现分享至朋友圈的功能

微信小程序实现分享至朋友圈的功能 微信小程序从基础库 2.11.3 开始&#xff0c;可将小程序页面分享到朋友圈。适用于内容型页面的分享&#xff0c;不适用于有较多交互的页面分享。 1 设置分享状态 小程序页面默认不可被分享到朋友圈&#xff0c;开发者需主动设置“分享到朋友…

HBuilder X的下载与使用(详细步骤)

一、HBuilder X的下载 这里我们前往HBuilder下载官网地址&#xff1a;https://www.dcloud.io/进入官网后&#xff0c;我们可以看到HBuilder目前有两个版本&#xff0c;一个是windows版&#xff0c;一个是mac版。下载一个自己电脑适合的版本&#xff0c;这里我下载步骤用的是wi…