美文网首页
vue+ElementUI改变主题色

vue+ElementUI改变主题色

作者: hsqin | 来源:发表于2018-07-25 17:09 被阅读259次

背景介绍:项目使用vue.js+elementUI+scss,但是项目的主题色要修改为紫色。Mac电脑,且已安装过npm。
我使用的是全局安装(-g),官方文档说是建议安装在项目中

全局安装步骤

cd element-demo
npm i element-theme -g
npm i element-theme-chalk -D
et -i
修改scss中的颜色值
et
main.js修改引入

步骤说明

  1. 进入项目文件夹 cd element-demo

  2. 安装主题生成工具npm i element-theme -g

  3. 安装白垩主题(不可以省略)npm i element-theme-chalk -D

  4. 改变初始变量文件et -i,会在根目录下多出一个element-variables.scss文件

  5. 找到element-variables.scss文件,修改主题色变量(primary)和其他要改变的颜色(eg:danger)

    修改primary和danger色值.png
  6. 编译主题et

  7. 引入自定义主题,保存后,就可以看到颜色已变为了你设置的颜色


    引入自定义主题.png
效果.png

相关文章

  • vue+ElementUI改变主题色

    背景介绍:项目使用vue.js+elementUI+scss,但是项目的主题色要修改为紫色。Mac电脑,且已安装过...

  • vue+ElementUI改变主题色

    背景介绍:项目使用vue.js+elementUI+scss,但是项目的主题色要修改为紫色。Mac电脑,且已安装过...

  • 基于Vue+elementUI深色主题表格组件

    基于Vue+elementUI深色主题表格组件 使用步骤 1. git地址 2. 运行 3. 部署 4. 项目截图...

  • 主题色

    系统生成的主题 图上的各参数都可以直接配置到主题中生效。其中colorPrimaryDark仅在Lollipop以...

  • 顶部tabbar 尺寸和颜色

    尺寸和颜色需要各自加一个 PreferredSize 和 Material改变主题色 appBar: AppBar...

  • ReactNative0.59.0动态改变TabBar主题色

    1 . BottomNav 2. BottomNavItem 3. Page1 赋简单DEMO 动态配置选项卡 P...

  • 主题色提取

    姚丽冰 学号:16050120089 转载: https://juejin.im/entry/5a0e64ed51...

  • 主题色切换

    这是一篇利用less来完成主题色切换的文章。 theme-color-generator 首先我们需要利用them...

  • 前端 echarts

    自选色echarts有默认色,往往与产品的主题色不符,那么如何设置呢?设置代码设置主题色.png效果图主题色效果图...

  • 在storyboard中调节主题色

    全局主题色:Global Tint Tab Bar 主题色:Image Tint

网友评论

      本文标题:vue+ElementUI改变主题色

      本文链接:https://www.haomeiwen.com/subject/yexmmftx.html