定制化UI界面

简介: 本文介绍如何基于若依(RuoYi)框架定制化项目界面,包括更换浏览器标签页logo与标题、系统页面logo与标题、登录页名称及背景图,并去除源码地址、文档地址及官网标识,同时调整主题UI风格,打造符合企业形象的前端界面,适用于Vue3版本脚手架项目。

ogo、背景图更换
如果使用若依框架项目做为脚手架,那么我们肯定需要在页面显示中,使用符合自己公司或者项目的标识才行,需要更换的地方很多,我们依次来解决它
● 浏览器标签页logo标识、标题
● 系统页面中的logo标识、标题
● 登录名称及背景图
● 去除源码地址 & 文档地址 &若依官网标识

浏览器标签页logo标识、标题
● logo替换
找到资料中UI资料目录下的logo图标,替换前端项目中的public文件夹,删除原有的favicon.ico,把新拷贝过来的logo更名为favicon.ico即可

● 标题更换
找到根目录下的index.html文件,把title更换为自己想要的内容即可

● 标题替换
若依的系统页面标题引用的是开发环境的配置,我们只需要修改开发的环境的VITE_APP_TITLE属性即可
如下图:

扩展阅读:
关于环境的文件一般有三个
● .env.development 开发环境的配置,默认的环境
● .env.production 生产环境
● .env.staging 测试环境
在打包或启动项目的时候,可以加参数来使用不同的环境,需要参考package.json中的配置
● logo替换
找到当天资料中的logo文件,替换 src/assets/logo/logo.png文件

最终效果:

登录名称及背景图
登录名称和背景图,我们可以直接找到登录的组件进行修改即可
组件位置:src/views/login.vue
● 登录名称

● 背景图

资料中已经提供了背景图,可以自行命名更换,注意图片名可能不一样
最终效果图:

去除源码地址 & 文档地址 & 若依官网标识
● 利用菜单功能,去除若依官网菜单项目

● 使用VS Code全局搜索功能,去除右上角的源码地址和文档地址
○ 文件路径:RuoYi-Vue3-master\src\layout\components\Navbar.vue
● 最终效果:

主题UI风格调整

相关文章
|
6月前
|
前端开发 JavaScript 安全
【RuoYi-SpringBoot3-ElementPlus】:若依前端增强版 —— 功能扩展优化
【RuoYi-SpringBoot3-ElementPlus】基于若依Vue3,100%兼容原功能,新增省市区级联、千分位输入、增强上传、UEditor等8+实用组件,集成dayjs、xe-utils、mitt等主流工具库,支持拖拽排序、移动端适配、三级等保自动登出,配备代码检查、Prettier格式化、FTP自动部署,开箱即用,显著提升开发效率与系统安全性。
1139 1
|
移动开发 前端开发 JavaScript
分享83个html5特效,总有一款适合您
分享83个html5特效,总有一款适合您
345 1
|
前端开发 JavaScript Java
现代化软件开发中的前后端分离模式
随着互联网技术的快速发展,现代化软件开发中的前后端分离模式逐渐成为主流。本文将介绍前后端分离的概念和优势,以及如何在不同的技术栈中实现这种模式。通过前后端分离,可以提高开发效率、降低耦合性,并且更好地满足用户需求。
1300 0
|
Java 数据库
若依框架---模板生成
若依框架---模板生成
524 0
|
XML 前端开发 Java
若依管理系统后端将 Mybatis 升级为 Mybatis-Plus
若依管理系统后端将 Mybatis 升级为 Mybatis-Plus
2378 0
|
IDE Linux 开发工具
【2026最新】Arduino IDE下载安装汉化保姆级教程(附安装包)
Arduino IDE是全球最易用的开源单片机开发环境,专为初学者设计,支持Win/macOS/Linux全平台,免费开源。界面简洁、汉化便捷,配套教程丰富,兼容海量硬件与项目,助电子爱好者、学生和创客快速实现创意原型。
7379 2
|
缓存 Linux
【阿里云镜像】切换阿里巴巴开源镜像站镜像——Fedora镜像
【阿里云镜像】切换阿里巴巴开源镜像站镜像——Fedora镜像
2051 0
【阿里云镜像】切换阿里巴巴开源镜像站镜像——Fedora镜像
|
6月前
|
移动开发 小程序 JavaScript
【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案
RuoYi-SpringBoot3-UniApp 是基于 Vue3 与 UniApp 的跨平台移动端解决方案,支持一套代码编译到小程序、App、H5 和桌面端。集成 Pinia 状态管理、JWT 认证、权限路由、z-paging 分页、mp-html 富文本等主流功能,开箱即用,显著降低多端开发与维护成本,助力高效构建企业级应用。
748 6
|
8月前
|
监控 关系型数据库 MySQL
《理解MySQL数据库》慢查询监控与优化实战指南
本文系统讲解慢查询的监控与优化,涵盖影响分析、日志配置、SQL重写、索引策略及Java层优化,结合实战案例与自动化告警,构建全链路性能治理体系,提升系统稳定性与响应效率。
|
存储 缓存 安全
HashMap VS TreeMap:谁才是Java Map界的王者?
HashMap VS TreeMap:谁才是Java Map界的王者?
799 2