Element-UI动态更换主题

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

实践:

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

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

  Element-UI动态更换主题_第1张图片

 

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

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

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

   Element-UI动态更换主题_第2张图片

       Element-UI动态更换主题_第3张图片

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

         Element-UI动态更换主题_第4张图片

         Element-UI动态更换主题_第5张图片         Element-UI动态更换主题_第6张图片

 

转载于:https://www.cnblogs.com/yancongyang/p/10003849.html

你可能感兴趣的:(ui,javascript,webpack,ViewUI)