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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Three.JS实现三维场景
Dec 30 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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设计模式之调解者模式的深入解析
2013/06/13 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
javascript读取xml实现javascript分页
2013/12/13 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
在django模板中实现超链接配置
2019/08/21 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
python反扒机制的5种解决方法
2021/02/06 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
办公室年终个人自我评价
2013/10/28 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
行政助理岗位职责
2015/02/10 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
导游词之无锡梅园
2019/11/28 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA