参考:vue-基于elementui换肤[自定义主题]

实践:

需求1.后期维护主题色不更换:

   直接在线主题生成工具下载,在APP.VUE引入;(注意Element UI 版本1.3?2.0)

  

需求2.后期维护主题色频繁更换:

   需要两个工具:
           步骤1.element-variables.scss 可以设置自定义主题(按钮颜色需求、根字体大小等),输入指令:et 后,

会下载设置的自定义主题:theme;( 也可以,直接在线下载,放入theme文件夹)

   

  步骤2. gulpfile.js 把上述的theme文件主题,输入指令:gulp css-wrap 压缩打包成规定的文件,方便后期动态替换主题色;

        

Element-UI动态更换主题的更多相关文章

  1. 使用 css/less 动态更换主题色(换肤功能)

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  2. element ui 动态菜单解决方案集锦

    1.<分享一个VUE Element-UI 的多级菜单动态渲染的组件> 2.<饿了么组件库,element-ui开发精美的后台管理系统系列之(一)开发伸缩菜单> 3.<V ...

  3. vue 使用 element ui动态添加表单

    html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref=&q ...

  4. element ui主题色跟换

    node_modules\ element ui\ lib\ theme-dafault  下载的主题色替换掉改文件... ================== 但是会出现  搜索框iocon 样式换 ...

  5. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  6. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  7. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  8. 【转】【iOS】动态更换App图标

    原文网址:http://www.cocoachina.com/ios/20170619/19557.html 前言 动态更换App图标这件事,在用户里总是存在需求的:有些用户喜欢“美化”自己的手机.至 ...

  9. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

随机推荐

  1. 安卓 App 性能专项测试指标之 CPU 深度解析

    指标背景 很多场景下我们去使用App,可能会碰到手机会出现发热发烫的现象.这是因为CPU使用率过高.CPU过于繁忙,会使得整个系统无法响应用户,整体性能降低,用户体验变得相当差,也容易引起ANR等等一 ...

  2. 基于vue-cli构建vue-router的入门级demo

    前言 本案列仅针对刚刚入门vue学习的伙伴,博主也是刚刚在学基于vue-cli搭建脚手架项目,对于前端大牛,可以移步. 快速搭建vue-cli环境 如何搭建基于vue-cli项目,这里不再叙述,如果不 ...

  3. Got permission denied while trying to connect to the Docker daemon socket at

    添加新用户后执行docker命令由于没权限出现以下报错: ”Got permission denied while trying to connect to the Docker daemon soc ...

  4. python验证码简单识别

    因为需求,所以接触了验证码这一块,原本感觉到会很难,学了之后挺简单的,但后来又发现自己还是too young... PIL(python Image Library) 目前PIL的官方最新版本为1.1 ...

  5. Node.js 命令行工具的编写

    日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作.其编写也不难,和日常编写 Node.js 代码并无二致. package.json 中的 bin 字段 一个 npm 模块, ...

  6. 『集群』001 Slithice 服务器集群 概述

    Slithice 服务器集群 概述 Slithice是做什么的 Slithice 是一个 跨平台 的 分布式架构 框架: 旨在简化 分布式开发 的开发难度,节省 开发成本 和 后期维护成本: 并提供 ...

  7. python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍

    目录 python学习第七讲,python中的数据类型,列表,元祖,字典,之元祖使用与介绍 一丶元祖 1.元祖简介 2.元祖变量的定义 3.元祖变量的常用操作. 4.元祖的遍历 5.元祖的应用场景 p ...

  8. AngularJs with Webpackv1 升級到 Webpack4

    本篇記錄一下升級的血淚過程 請注意升級前請先創一個新目錄將升級應用與舊應用隔離 1. 需要將相關的套件做統一升級的動作,已確認需要升級所有舊的loaders 其它應用的套件可先不做升級的動作 (如果編 ...

  9. 【spring实战第五版遇到的坑】3.1中的例子报错

    按照书中的例子,一直做到第3.1章使用JDBC读写数据时,在提交设计的taco表单时,报了如下的异常信息: Failed to convert property value of type java. ...

  10. DevOps概述

    Devops概念 转载自 devops实践-开篇感想 DevOps(英文Development和Operations的组合)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和 ...