介绍
这篇文章给大家分享的是有关Vue中elementUI实现自定义主题的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,,先说项目中没有使用scss编写,用主题工具的方法
第一种方法:使用命令行主题工具
使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍)
一、安装工具
1,安装主题工具
npm我element-theme - g 2,安装粉笔主题,可以从npm安装或者从GitHub拉取最新代码
#从npm
npm我element-theme-chalk - d
#从GitHub
npm我https://github.com/ElementUI/theme-chalk - d 二、初始化变量文件
等我(可以自定义变量文件,默认为element-variables.scss]
比;？ 发电机变量文件 这时根目录下会产生element-variables。scss(或自定义的文件),大致如下:
美元——色原:# 409滚开!违约;
美元——color-primary-light-1:混合(白色,美元——色原,10%)!违约;/* 53 a8ff */美元——color-primary-light-2:混合(白色,美元——色原,20%)!违约;/* 66 b1ff */美元——color-primary-light-3:混合(白色,美元——色原,30%)!违约;/* 79 bbff */美元——color-primary-light-4:混合(白色,美元——色原,40%)!违约;/* 8 cc5ff */美元——color-primary-light-5:混合(白色,美元——色原,50%)!违约;/* a0cfff */美元——color-primary-light-6:混合(白色,美元——色原,60%)!违约;/* b3d8ff */美元——color-primary-light-7:混合(白色,美元——色原,70%)!违约;/* c6e2ff */美元——color-primary-light-8:混合(白色,美元——色原,80%)!违约;/* d9ecff */美元——color-primary-light-9:混合(白色,美元——色原,90%)!违约;/* ecf5ff */美元——color-success: # 67 c23a !违约;
美元——颜色警告:# eb9e05 !违约;
美元——color-danger: # fa5555 !违约;
美元——color-info: # 878 d99 !违约;
… 三、修改变量
直接编辑element-variables。scss文件,例如修改主题色为自己所需要的颜色(如:紫色(紫色))
美元——色原:紫色; 四、编译主题
修改完变量后,要编译主题(如果编译后,再次修改了变量,需要重新编译)
等
比;？ 构建主题字体
比;？ 构建元素主题 五,引入自定义主题
最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的主题文件下,也可以通过- o参数指定打包目录),在入口文件主要。js中引入
进口& # 39;. ./主题/index.css& # 39;
从& # 39;进口ElementUI element-ui& # 39;
从& # 39;进口Vue Vue # 39;
Vue.use (ElementUI) 在项目中写些样式,看下主题色是否改变:(主题色变为紫色)
& lt; p>
& lt; el-button>默认按钮& lt;/el-button>
& lt; el-button类型=皃rimary"祝辞主要按钮& lt;/el-button>
& lt; el-button类型=皊uccess"祝辞成功按钮& lt;/el-button>
& lt; el-button类型=癷nfo"祝辞信息按钮& lt;/el-button>
& lt; el-button类型=皐arning"祝辞警告按钮& lt;/el-button>
& lt; el-button类型=癲anger"祝辞危险按钮& lt;/el-button>
& lt;/p> 第二种方法:直接修改元素样式变量
在项目中直接修改元素的样式变量,(前提是你的文档也是使用scss编写)
一,首先用vue-cli安装一个新项目:
1,安装vue:
npm我- g vue 2,在项目目录下安装vue-cli:
npm我- g vue-cli 3,基于webpack建立新项目(vue-project)
vue init webpack vue-project 4,依次输入以下命令行,运行vue-project
cd vue-project
npm我
npm运行dev 二、安装elementUI以及sass-loader, node-sass(项目中使用scss编写需要依赖的插件)
1,安装element-ui
npm我element-ui - s 2,安装sass-loader, node-sass
npm我sass-loader node-sass - d 在这里说一下,不需要配置webpack.base.conf.js文件,vue-loader会根据不同类型文件来配置相应加载程序来打包我们的样式文件(感兴趣的可看下vue-loader的核心代码)
