参考: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. linux 上安装多个不同版本的mysql 踩的坑

    最近由于业务需要,考虑使用json类型,据了解 mysql 在版本5.7中可以支持 json 类型的数据支持,但同时目前开发环境中使用的是 mysql 5.6版本,上面还有很多项目的数据库在上面,同时 ...

  2. Ubuntu16 Nginx的安装与基本配置

    关于Nginx 它是一个轻量级.高性能.稳定性高.并发性好的HTTP和反向代理服务器,当我们搭建自己的应用时,通常用它作为反向代理服务器,图片服务器和负载均衡. 1.Ubuntu 16安装 Nginx ...

  3. Asp .Net Core 读取appsettings.json配置文件

         Asp .Net Core 如何读取appsettings.json配置文件?最近也有学习到如何读取配置文件的,主要是通过 IConfiguration,以及在Program中初始化完成的. ...

  4. TabLayoutBottomDemo【TabLayout实现底部选项卡】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用TabLayout实现底部选项卡切换功能. 效果图 代码分析 1.演示固定模式的展现 2.演示自定义布局的实现 使用步骤 一.项 ...

  5. c++智能指针和二叉树(1): 图解层序遍历和逐层打印二叉树

    二叉树是极为常见的数据结构,关于如何遍历其中元素的文章更是数不胜数. 然而大多数文章都是讲解的前序/中序/后序遍历,有关逐层打印元素的文章并不多,已有文章的讲解也较为晦涩读起来不得要领.本文将用形象的 ...

  6. @vue-cli3创建项目报错:ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --di

    使用@vue-cli3时 在你感觉所以配置都搞好开始创建项目时,不停的报错,就是创建不成功 清npm缓存也不行 改淘宝镜像也不行 就快奔溃了,最后最终(其实我在凑150字,为了能发到首页给更多采坑的兄 ...

  7. sublime text3插件增强侧边栏的功能文件的复制粘贴

    快捷键ctrl + shift +p 输入  install package 回车,调出插件搜索器, 在搜索栏中输入 SideBarEnhancements 回车安装插件. 在侧边栏中的各种操作功能增 ...

  8. asp.net mvc 简单项目框架的搭建过程(一)对Bll层和Dal层进行充分解耦

    学习asp.net 已经有近三个月的时间了,在asp.net mvc上花的时间最多,但个人真是有些菜,不得不说,asp.net mvc的水真的还是蛮深的.目前在公司实习,也见过公司几个项目的代码了.对 ...

  9. 【Oracle学习笔记】游标

    1. 分类 常见的游标可分为显示游标.隐式游标.静态游标和动态游标四大类: 1.1 显示游标 显式是相对与隐式cursor而言的,就是有一个明确的声明的cursor.显式游标的声明类似如下: delc ...

  10. ES6系列之变量声明let const

    ES6也出来好久了,最近闲来无事就想着吧es6做一个系统的总结,巩固自己的知识,丰富一下博客. 为什么叫ES6 实际上是ECMA的一个打的标准,这个标准是在2015年6月发布的,正式的名字实际是es2 ...