如何使用element-ui进行主题的切换呢

2023-10-26

我们在使用element-ui框架的时,有很多时候主题的配色都是我们不喜欢的,那这个时候element-ui的组件库就帮助我们推出了一套主题定制,用来帮助我们切换主题,方法也很简单

在项目中改变sass变量

首先在项目中src文件创建一个style文件

在文件中进行以下配置:

/*改变主题色变量*/

$--color-primary: #2ca471;

/* 改变 icon 字体路径变量,必需 */

$--font-path: '~element-ui/lib/theme-chalk/fonts'; 

@import "~element-ui/packages/theme-chalk/src/index";

然后再main.js中引用即可

import Vue from 'vue'

import  '@/src/style/xxx.sass'

这里我们需要注意sass-loader的安装,如果未安装的话,具体安装步骤请详见sass-loader

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用element-ui进行主题的切换呢 的相关文章

  • Qt/C++使用QUiLoader动态加载ui资源文件

    目录 动态对话框 使用场景 注意事项 动态对话框加载 获取动态对话框的控件对象 与动态对话框建立关联 动态修改ui资源文件效果测试 动态对话框 动态对话框 dynamic dialog 就是在程序运行时使用的从Qt设计师的 ui文件创建而来
  • Javescribt Library Javescript 库 总结

    Yahoo User Interface Library YUI Library YUI is a free open source JavaScript and CSS library for building richly intera
  • Android:基本 UI 组件

    前言 组件是 Android 程序设计的基本组成单元 通过使用组件可以高效地开发 Android 应用程序 文本类组件 Android 中提供了一些与文本显示 输入相关的组件 通过这些组件可以显示或输入文字 TextView 类 用于显示文
  • Qt Desginer布局方法

    关于Qt Desginer中的布局方法 网上教程少之又少 个人经过反复的实践和摸索 觉得可以用一句话来概括 先不断地进行小布局 然后对整体进行大布局 先不断地进行小布局的目的就是将同为一组的控件按某个格式排列使界面干净有序 同时方便以后对整
  • AFNetwork 作用和使用方法具体解释

    转自 http www maxiaoguo com clothes 269 html AFNetworking是一个轻量级的iOS网络通信类库 它建立在NSURLConnection和NSOperation等类库的基础上 让非常多网络通信功
  • Qt5学习之路(vs2012下创建一个QT应用程序)2013-10-14

    刚开始学习QT在网上找的资料基本都是使用QT Create进行开发的 VS下开发的学习资料感觉很少很难找的到 视频教程也基本没看到过貌似 因为我们研发中心是使用MFC进行开发开发工具是VS2010 使用QT开发的话基本我们不会再使用QT C
  • QPainter::setPen: Painter not active 解决方案

    今天在写代码的时候用到QPainter在窗口中绘制一些图形 出现错误 QPainter setPen Painter not active 百度上搜了也问了chatGPT没有很好的答案 无奈只好打开Qt API找问题 在Qt 文档中发现如下
  • UE4命令行使用,解释

    命令行在外部 从命令行运行编辑项目 1 导航到您的 LauncherInstall VersionNumber Engine Binaries Win64 目录中 2 右键单击上 UE4Editor exe 的可执行文件 并选择创建快捷方式
  • QT-----ChartView控件的使用

    chartview可用于制作折线图 饼状图 条行 柱状 直方图系等来体现数据数据变化起浮 以下案例以折线图举例 1 使用ChartView控件 注意点 1 要在pro文件中加入 QT widgets 2 主界面应当使用QApplicatio
  • 【前端】Vue+Element UI案例:通用后台管理系统-项目总结

    文章目录 相关链接 前言 效果 登录页 首页 管理员的首页 xiaoxiao的首页 用户管理 总结 项目搭建 左侧 CommonAside 上侧 CommonHeader和CommonTag 首页 Home vue 用户管理 User vu
  • string (std::string)转换为QString的用法(含中文)

    string s 123 QString str QString fromStdString s 含中文时的转换 std string str 你好世界 QString Name QString fromLocal8Bit str c st
  • web移动端布局的那些事儿

    原文地址 github com HuJiaoHJ bl web移动端布局范畴很广 其中比较基础的几个话题 移动端适配 1px border 基础布局 本文主要分享这三个话题 一 移动端适配 提起移动端适配 大家想到的肯定是rem flexi
  • (ps2019)Photoshop 2019 最新破解版下载

    Photoshop CC 2019新增功能 下载地址点我 新功能介绍 https helpx adobe com cn photoshop using whats new html 经过改良设计的内容识别填充 借助 Adobe Sensei
  • Consul服务注册与发现

    目录 一 Consul简介 一 官网 二 特点 二 安装并运行Consul 一 官网安装说明 二 下载 三 使用开发模式启动 三 服务提供者 四 服务消费者 五 三个注册中心异同点 一 CAP理论 二 AP架构 三 CP架构 一 Consu
  • 数理统计知识整理——回归分析与方差分析

    题记 时值我的北科研究生第一年下 选学 统计优化 课程 备考促学 成此笔记 以谨记 1 线性回归 1 1 原理分析 要研究最大积雪深度x与灌溉面积y之间的关系 测试得到近10年的数据如下表 使用线性回归的方法可以估计x与y之间的线性关系 线
  • 296_C++_一个dialog对话框在执行exec向系统发送一个延后销毁事件时,另一个对话框立刻接管了上一个对话框的销毁事件,导致死UI

    1 根因分析 根因分析 当有新版本并且grade等级是2的时候 点击ptz的时候使用的是RSDialog WA DeleteOnClose属性默认是为true的 并且是栈上的变量 当关闭ptz的时候 diolog的exec结束会向系统发送延
  • vue element-ui el-tooltip组件失效问题

    引用自 https blog csdn net ygrhlh article details 121660806 vue element ui el tooltip组件失效问题 因为公司项目年代久远以及谷歌chrome 80 后的sames
  • WPF应用实战开发指南 - 如何实现动态内容展示

    在我们开发一些复杂信息的时候 由于需要动态展示一些相关信息 因此我们需要考虑一些控件内容的动态展示 可以通过动态构建控件的方式进行显示 如动态选项卡展示不同的信息 或者动态展示一个自定义控件的内容等等 目的就是能够减少一些硬编码的处理方式
  • app测试必掌握的核心测试:UI、功能测试!

    一 UI测试 UI即User Interface 用户界面 的简称 UI 设计则是指对软件的人机交互 操作逻辑 界面美观的整体设计 好的UI设计不仅是让软件变得有个性有品味 还要让软件的操作变得舒适 简单 自由 充分体现软件的定位和特点 手
  • HarmonyOS鸿蒙开发指南:容器组建 stepper开发指导

    目录 创建Stepper组件 设置index属性 设置样式 添加事件 场景示例 创建Stepper组件 在pages index目录下的hml文件中创建一个Stepper组件 div class container div

随机推荐

  • 微信小程序头部导航栏返回键,返回到指定页面

    onUnload function wx reLaunch url my my onUnload 参考微信小程序页面路由
  • VTK教程(1):VTK基础知识

    VTK教程 1 VTK基础知识 VTK Visualization Toolkit 是一个功能强大的开源图形和可视化库 用于处理和可视化各种类型的数据 包括几何数据 图像 体数据 矢量场等 以下是VTK的基础知识 数据类型和数据集 VTK支
  • 数据库之MySQL基本操作

    数据库之MySQL 可以把MySQL看成一款支持远程操作文件的软件 库 gt gt gt 文件夹 表 gt gt gt 文件 记录 gt gt gt 文件内一行行的数据叫做一条条的记录 表头 就是表格的第一行数据 字段 字段名 字段类型 本
  • 【VUE3+AntV-G2】数据可视化 封装antv G2 气泡图组件

    一些废话 默默做前端 分享一些自己在项目需求实现中遇到的奇妙问题 主要是网上搜索不到解决办法自己解决后的总结方法和解决办法但不全面 自己整理总结的存档 事发背景 原型绘制了需要同时展示多个指标的数据气泡图 想到可以使用antv的气泡图 刚好
  • 顺序表和单链表基本操作的实现

    1 顺序表的建立 取指定元素 返回指定元素位置 2 顺序表中插入新元素 删除指定元素操作的实现 3 单链表的建立 取指定元素 返回指定元素位置 4 单链表中插入新元素 删除指定元素操作的实现 该主要完成单链表中基本操作的实现 单链表中的元素
  • 【C语言】简易计算器的模拟实现

    前言 最近在复习指针和数组 发现之前没写过利用函数指针数组来实现计算器的博客 所以今天就来写一下 引入 先来复习一下函数指针和函数指针数组的知识 函数指针 语法格式 函数返回类型 pf 函数各个参数的类型 函数名 例子 include
  • 2020-09-20

    一 Bootstrap Jumbotron 超大屏幕 1 1 基本的超大屏幕可以通过在 元素 中添加 jumbotron 类来创建 jumbotron
  • adf盖怎么打开_打印机墨盒怎么更换,看我这篇文章就够了

    有的小伙伴后台私信小编 说想更换打印机墨盒却不知道怎么下手 今天小编就给大家说说 教科书 般的墨盒更换方法 今天以HP deskjet 4729 为例来讲解 步骤一 取出需要更换的墨盒 1 将打印机接通电源并开机 请确保打印机处于正常待机状
  • Repeater没有数据时显示空行

    网上看了很多一般都是重写repeater控件 不过发现一个超简单的方法 直接利用FooterTemplate 在里面加上
  • 大佬给鸿星尔克写了一个 720° 看鞋展厅

    前段时间 在各大互联网平台 鸿星尔克成为了顶流般的存在 鸿星尔克官方账号更是一夜暴涨百万粉丝 直播间产品也被卖到下架 在鸿星尔克捐款的消息出现之后 在短短的几天里 鸿星尔克的销售额就超过了上半年的总销售额 一周前 有一个程序员 蓝色的秋风在
  • 使用Keras中的LSTM完成温度预测问题,并对模型提出不同的改进方法,如:逆向、双向、丢包等

    前言 本例使用的是一个天气时间序列数据集 由德国耶拿的马克思普朗克生物地球化学研究所的气象站记录 这个例子作为初学者必看的例子之一 在这个数据集中 每十分钟记录14个不同的量 比如风向 湿度等 其中包含多年的记录 最原始的数据可以追溯到20
  • 服务器 多个操作系统,多个不同操作系统服务器

    多个不同操作系统服务器 内容精选 换一换 切换操作系统是为您的云服务器重新切换一个系统盘 切换完成后云服务器的系统盘ID会发生改变 并删除原有系统盘 如果云服务器当前使用的操作系统不能满足业务需求 如软件要求的操作系统版本较高 您可以选择切
  • 金字塔思维

    金字塔思维让表达主题明确 人们很难记住7个以上的东西 条理清晰的文章有金字塔结构 搭建金字塔 缺乏思想的句子不是好句子
  • MySQL触发器

    按照 MySQL必知必会 的例子创建触发器 结果报错 因为在触发器中允许调用存储过程 执行INSERT UPDATE DELETE等操作 但却唯独不允许返回任何结果 仔细一查 原来是版本变更导致的问题 创建成功的代码 先定义用户变了 a 或
  • java使用libreOffice预览word,ppt,txt等文档

    首先电脑上需要下载libreOffice 中文官网下载地址 https zh cn libreoffice org download libreoffice 安装过程较为简单 安装完需要重启完成配置 不要安装在中文目录下 验证libreOf
  • 微博存在的伦理道德问题

    开心的事写在微信 生活的事写在qq 伤心的事写在微博 因为微信里有父母 qq里有朋友 微博里有自己 微博作为一种即时媒体 已经成为大家宣泄自己情绪的场所了 它 开放式讨论 的共同优势 是人们在社会热点新闻特别是突发事情发作后讨论事故缘由 考
  • 熵 熵的简单理解和实例

    熵 熵的简单理解和实例 熵是信息量 越大越混乱 越小越确定 1 熵的由来 假设两个相互独立随机变量 x y的概率分布分别为p x p y 那么联合概率分布 P x y p x p y P x y p x p y P x y p x p y
  • 10 个免费学习编程的最佳网站

    来源 https us niemvuilaptrinh com article 11 webiste to practice code online 一旦我们开始学习了编程语言的基础知识 接下来 我们要将这些知识应用到实际项目中 就是要更长
  • [JAVA][2013蓝桥杯预赛 JAVA本科B组][世纪末的星期]

    标题 世纪末的星期 曾有邪教称1999年12月31日是世界末日 当然该谣言已经不攻自破 还有人称今后的某个世纪末的12月31日 如果是星期一则会 有趣的是 任何一个世纪末的年份的12月31日都不可能是星期一 于是 谣言制造商 又修改为星期日
  • 如何使用element-ui进行主题的切换呢

    我们在使用element ui框架的时 有很多时候主题的配色都是我们不喜欢的 那这个时候element ui的组件库就帮助我们推出了一套主题定制 用来帮助我们切换主题 方法也很简单 在项目中改变sass变量 首先在项目中src文件创建一个s