时间:2021-05-26
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多)
第一种方法:使用命令行主题工具
使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍)
一、安装工具
1,安装主题工具
npm i element-theme -g2,安装chalk主题,可以从 npm 安装或者从 GitHub 拉取最新代码
# 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm 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; $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; $--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 vue2,在项目目录下安装vue-cli:
npm i -g vue-cli3,基于webpack建立新项目( vue-project)
vue init webpack vue-project4,依次输入以下命令行,运行vue-project
cd vue-projectnpm inpm run dev二、安装elementUI以及sass-loader,node-sass(项目中使用scss编写需要依赖的插件)
1,安装element-ui
npm i element-ui -S2,安装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;$--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实现自定义主题方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文为大家分享了Vue+ElementUI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下1.安装npminstallv
下面给大家分享vue自定义指令拖拽功能代码,具体代码如下所示:实例方法//自定义指令Vue.directive('drag',function(){varoDi
最近做一个vue前后端分离的项目,前端框架用elementui,在使用el-table的过程中,需要实现行内编辑,效果大概是这样:分为下面几个步骤:(1)自定义
简介实现功能自定义文本自定义类型(默认,消息,成功,警告,危险)自定义过渡时间使用vue-cli3.0生成项目toast全局组件编写/src/toast/toa
1.Vue指令 Vue提供自定义实现指令的功能,和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.