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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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实现的下载css文件中的图片的代码
2010/02/08 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
Jquery实现动态切换图片的方法
2015/05/18 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
python+opencv识别图片中的圆形
2020/03/25 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python实现登录与注册系统
2020/11/30 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
公司同意接收函
2014/01/13 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
主题团日活动总结
2014/06/25 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫