若依VUE前后分离版本自定义主题风格

1.效果展示

在这里插入图片描述

在这里插入图片描述

2.操作步骤

2.1修改Navbar头部背景颜色

在这里插入图片描述
文件路径:src\layout\components\Navbar.vue
修改内容:设置头部背影颜色及右侧图标颜色

在这里插入图片描述
在这里插入图片描述

2.2 修改左侧图标颜色

在这里插入图片描述

文件路径:src\components\Hamburger\index.vue

<template>
  <div style="padding: 1px 15px;" @click="toggleClick">
    <i class="el-icon-s-fold hamburger" :class="{'is-active':isActive}" ></i>
  </div>
</template>

.hamburger {
   
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  font-size: 20px;
}

2.3添加自定义主题风格

文件路径:src\layout\components\Settings\index.vue
新增一个主题风格选项,主要注意的是handleTheme里面的传参(后面会用到)和img的src图片,例如实例中的blue.svg

            <!--自定义主题风格-->
            <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-blue')">
              <img src="@/assets/images/blue.svg" alt="dark">
              <div v-if="sideTheme === 'theme-blue'" class="setting-drawer-block-checbox-selectIcon"
                   style="display: block;">
                <i aria-label="图标: check" class="anticon anticon-check">
                  <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" :fill="theme"
                       aria-hidden="true" focusable="false" class="">
                    <path
                      d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"/>
                  </svg>
                </i>
              </div>
            </div>

静态资源svg图片代码 放在src\assets\images 目录下

<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink
### 若依框架前后分离部署教程 #### 准备工作 为了成功部署基于 Spring Boot 和 Vue 构建的若依框架,需先完成环境准备。确保已安装并配置好 Java 开发环境 (JDK),以及 Node.js 环境用于支持前端开发工具链[^1]。 #### 后端部署流程 后端部分主要依赖于 Spring Boot 技术栈实现服务端逻辑处理。对于 RuoYi-Vue 版本而言,在启动应用之前还需要额外设置数据库连接参数及 Redis 缓存服务器的相关属性[^2]。 - **获取源码** 使用 Git 或其他方式克隆官方仓库至本地 IDE 中。 - **修改配置文件** 打开 `application.yml` 文件调整数据源、缓存等相关配置项以适配实际运行环境需求。 - **构建与发布** 利用 Maven 或 Gradle 工具编译打包成可执行 JAR 包形式;随后可通过命令行或者借助容器化技术如 Docker 来运行该应用程序实例。 #### 前端部署指南 针对前端工程,则侧重于利用现代 JavaScript 框架——Vue 进行页面渲染和服务交互操作。 - **初始化项目** 安装必要的 npm/yarn 软件包来满足构建过程所需的各种插件库依赖关系。 - **自定义主题风格** 可选地定制样式表资源,以便更好地匹配企业品牌形象设计标准。 - **生产模式下打包** 发布前记得切换到 production mode 下进行优化压缩后的静态资源输出作业。 最后一步是在 Web Server 上注册新的站点记录指向存放有上述生成好的 HTML/CSS/JS 文件夹位置,并确认能够正常访问首页内容即可[^3]。 ```bash # 启动后台服务 nohup java -jar ruoyi-admin.jar & ``` ```javascript // 示例:Nginx 配置片段 server { listen 80; server_name localhost; location / { root html/dist; # vue build output dir index index.html; try_files $uri $uri/ /index.html; } } ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大锐爱学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值