Vue的elementUI实现自定义主题方法


Posted in Javascript onFebruary 23, 2018

使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多)

第一种方法:使用命令行主题工具

使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍)

一、安装工具

1,安装主题工具

npm i element-theme -g

2,安装chalk主题,可以从 npm 安装或者从 GitHub 拉取最新代码

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

二、初始化变量文件

et -i [可以自定义变量文件,默认为element-variables.scss]
> ✔ Generator variables file

这时根目录下会产生element-variables.scss(或自定义的文件),大致如下:

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
...

三、修改变量

直接编辑 element-variables.scss 文件,例如修改主题色为自己所需要的颜色(如: 紫色(purple))

$--color-primary: purple;

四、编译主题

修改完变量后,要编译主题(如果编译后,再次修改了变量,需要重新编译)

et
> ✔ build theme font
> ✔ build element theme

五、引入自定义主题

最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)

在项目中写些样式,看下主题色是否改变:(主题色变为紫色)

<div>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </div>

第二种方法: 直接修改element样式变量

在项目中直接修改element的样式变量,(前提是你的文档也是使用scss编写)

一、首先用vue-cli安装一个新项目:

1,安装vue:

npm i -g vue

2,在项目目录下安装vue-cli:

npm i -g vue-cli

3,基于webpack建立新项目( vue-project)

vue init webpack vue-project

4,依次输入以下命令行,运行vue-project

cd vue-project
npm i
npm run dev

二、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件)

1,安装element-ui

npm i element-ui -S

2,安装sass-loader,node-sass

npm i sass-loader node-sass -D

在这里说一下,不需要配置webpack.base.conf.js文件,vue-loader会根据不同类型文件来配置相应loader来打包我们的样式文件(感兴趣的可看下vue-loader的核心代码)

三、改变element样式变量

1.在src下建立element-variables.scss文件(名字可以自定义),写入如下代码:

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

2.在入口文件main.js中引入上面的文件即可

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

看下效果吧,在文件里引入些样式看看,如button

<div>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </div>

默认的颜色已经变为我们自定义的了,有其他的改变在element-variable.scss文件中改变变量即可

以上这篇Vue的elementUI实现自定义主题方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
elementui的默认样式修改方法
Feb 23 #Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 #Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 #Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 #Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 #Javascript
Vue2 模板template的四种写法总结
Feb 23 #Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 #Javascript
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP 面向对象详解
2012/09/13 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Django如何自定义分页
2018/09/25 Python
Python多项式回归的实现方法
2019/03/11 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
用python实现一个简单的验证码
2020/12/09 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
汽车队司机先进事迹材料
2014/02/01 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
个人银行贷款担保书
2014/04/01 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
反腐倡廉标语
2014/06/24 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
运动会报道稿300字
2014/10/02 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技