1、安装elementUI

$ npm i element-ui -S

2、安装主题工具

npm i element-theme -g

3、安装chalk主题

  npm 安装

npm i element-theme-chalk -D

  (或)

   GitHub 拉取最新代码

npm i https://github.com/ElementUI/theme-chalk -D

4、修改theme的sass文件

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

>  Generator variables file //表示成功

此时根目录下会产生 element-variables.scss 文件,大致如下:

5、编辑 element-variables.scss 文件,修改为自己所需要的颜色主题色

  示例:

$--color-primary: #17b3a3!default;

6、编译主题

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

et

>  build theme font
> build element theme //表示从新编译成功

执行主题编译命令生成主题,根目录会生成 theme 文件夹 。需要引入这个文件夹里的 css、font 等资源。(theme文件夹里有font文件夹和大量的css文件,css文件只留下index.css,其他的css文件都可以删掉,因为index.css中的样式包含其他全部css文件的样式。

7、引入自定义主题

  在main.js文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css' Vue.use(ElementUI) Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

8、使用

<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>

视图如:

在 vue-cli 项目中 使用elementUI 的“自定义主题”功能的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. 升级vue项目中的element-ui的版本

    首先卸载项目中的element-ui 命令为: npm uninstall element-ui / cnpm uninstall element-ui 安装更新最新的element-ui 命令为 n ...

  5. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  6. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  7. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  8. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

随机推荐

  1. 【LeetCode】39. 组合总和

    39. 组合总和 知识点:递归:回溯:组合:剪枝 题目描述 给定一个无重复元素的正整数数组 candidates 和一个正整数 target ,找出 candidates 中所有可以使数字和为目标数  ...

  2. 常用的IDEA快捷键

    常用的IDEA快捷键 代码右移:TAB键 代码左移:shift+TAB键 代码上移:shift+alt +方向键上 代码下移:shift+alt +方## 标题向键下 格式化代码 : ctrl +sh ...

  3. html 去除重复边框

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  4. centos7上用docker搭建简单的前后端分离项目

    1. 安装docker Docker 要求 CentOS 系统的内核版本高于 3.10 ,首先验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你当前的内核版本 使 ...

  5. MySQL-13-日志管理

    常用日志参数 经常用到的有错误.快慢查询.二进制等日志 错误日志 1 作用 记录启动\关闭\日常运行过程中,状态信息,警告,错误,排查MySQL运行过程的故障 2 错误日志配置 默认就是开启的: /数 ...

  6. Python 应用爬虫下载酷狗音乐

    应用爬虫下载酷狗音乐 首先我们需要进入到这个界面 想要爬取这些歌曲链接,然而这个是一个假的网站,虽然单机右键进行检查能看到这些歌曲的链接,可进行爬取时,却爬取不到这些信息. 这个时候我们就应该换一种思 ...

  7. CVE-2021-21972 vSphere Client RCE复现,附POC & EXP

    漏洞简介 vSphere 是 VMware 推出的虚拟化平台套件,包含 ESXi.vCenter Server 等一系列的软件.其中 vCenter Server 为 ESXi 的控制中心,可从单一控 ...

  8. OSPF的Router-Id

    一.实验拓扑 二.实验编址 三.实验步骤: 1.设置PC的IP等信息 2.启动设备(全选) 3.根据实验编址配置路由器端口IP(先不设置lookback端口) R1: R2: R3: R4: 看一下r ...

  9. SQL 练习11

    查询至少有一门课与学号为" 01 "的同学所学相同的同学的信息 SELECT * from Student WHERE SId in (SELECT SId from sc WHE ...

  10. ubuntu20.04 apache2 配置安装ssl证书

    1. 获取SSL证书 根据自己的网站服务器来获取不同的ssl证书,我的服务器是ubuntu20.04. 证书如下: 00_***.key ## 私钥文件 01_CERTIFICATE_***_***. ...